Выбор даты и времени не работает после установки для autoUpdateInput значения false

Question

У меня есть требование, чтобы, когда у пользователя есть дата, время существовало в базе данных, только тогда, когда оно показывает дату. Но если в базе данных нет даты и времени, то в текстовом поле она должна быть пустой.

Но при загрузке страницы datetimepicker устанавливает в ней значение по умолчанию. Так что для этого я установил autoUpdateInput в false это работает, установите текстовое поле пустым. Но после этого datetimepicker не устанавливает значение в текстовом поле.

$('.datetimepicker').daterangepicker({ 
    autoUpdateInput: false,       
    singleDatePicker: true,
    showDropdowns: true,
    timePicker: true,
    locale: {
        format: 'DD-MM-YYYY hh:mm:ss'
    },
});

Js Fiddle Link: https://jsfiddle.net/Ly0jh5pz/2/

Примечание: я должен использовать daterangepicker, так что начальной загрузки datetimepicker не вариант.

Answer 1

Попробуй это:

$("#reportdatetime").daterangepicker({
                autoUpdateInput: false,
        timePicker: true,
        timePicker24Hour: true,
        timePickerIncrement: 30,
        locale: {
            format: 'MM/DD/YYYY H:mm'
        }
    });

  $('#reportdatetime').on('apply.daterangepicker', function(ev, picker) {
      $(this).val(picker.startDate.format('MM/DD/YYYY H:mm') + ' - ' + picker.endDate.format('MM/DD/YYYY H:mm'));
  });

  $('#reportdatetime').on('cancel.daterangepicker', function(ev, picker) {
      $(this).val('');
  });

Answer 2

Вы должны вызвать change()чтобы убедиться, что он работает идеально во всех случаях; Иногда у вас есть несколько прослушивателей событий, и вам нужно инициировать изменение средства выбора диапазона дат.

      $('#date-picker-input').daterangepicker({ 
  autoUpdateInput: false,       
  singleDatePicker: true,
  showDropdowns: true,
  timePicker: true,
  locale: {
    format: 'DD-MM-YYYY hh:mm:ss'
  },
});

$("#date-picker-input").on('apply.daterangepicker', function(ev, picker) {
  $(this).val(picker.startDate.format('DD/MM/YYYY hh:mm A')).change();
});

$("#date-picker-input").on('cancel.daterangepicker', function(ev, picker) {
  $(this).val('').change();
});

Answer 3

Вы также можете попробовать этот формат, если хотите получить средство выбора даты и времени с временным диапазоном в одном формате. Ниже срока указан идентификатор вашего тега ввода HTML.

$("#duetime").daterangepicker({
    autoUpdateInput: false,
    startDate: false,
    minYear: 1901,
    showDropdowns: true,
    singleDatePicker: true,
    timePicker: true,
    timePicker24Hour: false,
    timePickerIncrement: 05,
    drops:"up",
    locale: {
        // format: 'MM/DD/YYYY hh:mm A'
        format: 'DD/MM/YYYY hh:mm A'
    },
});

$("#duetime").on('apply.daterangepicker', function(ev, picker) {
    $(this).val(picker.startDate.format('DD/MM/YYYY hh:mm A'));
});

$("#duetime").on('cancel.daterangepicker', function(ev, picker) {
    $(this).val('');
});