Date time picker not working after setting autoUpdateInput to false

问题

I have a requirement that when user has a date time exist in database only that time it shows date. But if database doesn't have date time then in text box it must be blank.

But when page load datetimepicker set default value in it. So for that I have set autoUpdateInput to false it's working it set textbox to blank. But after that the datetimepicker doesn't set value in textbox.

$('.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/

Note: I have to use daterangepicker so bootstrap datetimepicker is not an option.

回答1:

try this:

$("#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('');
  });

回答2:

You can try also this format if you want to get datetime picker with timerange in single formate. Below duetime is the id of your HTML input tag.

$("#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('');
});

回答3:

You should trigger change() to ensure it works perfectly in all cases; Sometimes you have some event listeners and need to trigger the change of date-range-picker.

$('#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();
});

来源：https://stackoverflow.com/questions/43868365/date-time-picker-not-working-after-setting-autoupdateinput-to-false

标签

javascript

jquery

datetimepicker

bootstrap-daterangepicker