将 autoUpdateInput 设置为 false 后日期时间选择器不起作用答案

【问题标题】：Date time picker not working after setting autoUpdateInput to false将 autoUpdateInput 设置为 false 后日期时间选择器不起作用
【发布时间】：2017-10-07 16:17:49
【问题描述】：

我有一个要求，当用户有一个日期时间存在于数据库中时，它只显示日期。但是如果数据库没有日期时间，那么在文本框中它必须是空白的。

但是当页面加载日期时间选择器在其中设置默认值。因此，为此我将autoUpdateInput 设置为false，它将文本框设置为空白。但之后 datetimepicker 不会在文本框中设置值。

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

Js Fiddle 链接：https://jsfiddle.net/Ly0jh5pz/2/

注意：我必须使用 daterangepicker，所以引导 datetimepicker 不是一个选项。

【问题讨论】：

标签： javascript jquery datetimepicker bootstrap-daterangepicker

【解决方案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('');
  });

【讨论】：

谢谢兄弟。它按照要求工作。
我有同样的问题，现在工作正常，但这里有另一个问题 onchange 函数现在无法正常工作我们如何设置请帮忙？
@NadeemIjaz，您可以将其作为不同的问题发布，因为它与 OP 发布的问题不同。

【解决方案2】：

如果您想获得具有单一格式的时间范围的日期时间选择器，您也可以尝试这种格式。 Duetime 下面是你的 HTML 输入标签的 id。

$("#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】：

您应该触发change() 以确保它在所有情况下都能完美运行；有时你有一些事件监听器，需要触发 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();
});

【讨论】：