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: /

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

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/Ly0jh5pz/2/

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

• javascript
• jquery
• datetimepicker
• bootstrap-daterangepicker

Share Improve this question Follow edited May 9, 2017 at 12:56 VincenzoC 31.5k1212 gold badges100100 silver badges121121 bronze badges asked May 9, 2017 at 11:15 BhavinBhavin 2,17866 gold badges3838 silver badges5656 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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

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

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