javascript - daterangepicker 应用按钮无法正常工作

Question

我正在使用 daterangepicker，请在此处检查我的代码 JSFIDDLE

我已设置默认日期

"endDate": "08/03/2015",
"endDate": "08/03/2015",

我设置了一个 alert() 来检查我的代码是否正常工作。

alert("New date range selected: '" + start.format('YYYY-MM-DD') + "' to '" + end.format('YYYY-MM-DD') + "'"); 

当我点击book_date时，会出现文本框范围日历。如果我更改任何日期并单击“应用”按钮，则其工作正常。我的 alert() 框显示完美。但是当我单击“应用”按钮而不更改任何日期时。那时 alert() 框没有显示。

此外，单击文本框并单击页面中的任意位置后，book_date 会获取默认日期。所以我不想在没有点击特定日期的情况下设置任何默认日期。单击日历外部时，文本框应为空白。

我编辑的代码:

$('#book_date').on('apply.daterangepicker', function(ev, picker) {
    alert("New date range selected: '" + picker.startDate.format('YYYY-MM-DD') + "' to '" + picker.endDate.format('YYYY-MM-DD') + "'");
});

如果我未选择任何内容并单击页面任意位置外部，我的文本框日历将获得默认值。

Answer 1

回调函数仅在选择新日期时执行。作为一种可能的解决方法，您可以使用 apply.daterangepicker 事件，该事件在单击“应用”按钮时触发:

$('#book_date').on('apply.daterangepicker', function(ev, picker) {
  var startDate = picker.startDate;
  var endDate = picker.endDate;
  alert("New date range selected: '" + startDate.format('YYYY-MM-DD') + "' to '" + endDate.format('YYYY-MM-DD') + "'");
});

查看示例 here .

扩展答案

没有内置方法可以阻止在您单击日期选择器时设置日期，因此您可以尝试以下操作:

自定义隐藏函数，以便在关闭日期选择器时清除日期:

$('#book_date').on('hide.daterangepicker', function (ev, picker) {
    $('#book_date').val('');
});

更新 apply 函数以相应地填充日期字段。因此，仅当单击“应用”按钮时才会设置日期:

$('#book_date').on('apply.daterangepicker', function (ev, picker) {
    var startDate = picker.startDate;
    var endDate = picker.endDate;  
    //MM/DD/YYYY format
    $('#book_date').val(startDate.format('MM/DD/YYYY') + ' - ' + endDate.format('MM/DD/YYYY'));
});

更新了演示 here .