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

如果我不是 select，我的文本框日历将获得默认值并在页面的任何位置之外单击。

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

在这里查看示例。

扩展答案

当您单击日期选择器时，没有内置的方法来阻止设置日期，因此您可以尝试这样做：

自定义hide功能，以便在日期选择器关闭时清除日期：

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

这里更新了演示。

Answer 2

当我们单击应用按钮然后执行回调函数但有条件。 如果更改了日期范围，则将执行回调函数，否则将不执行。 如果要在每次单击“应用”按钮时执行它，请考虑更改的日期范围越少，然后执行以下步骤。

打开daterangepicker.js
在DateRangePicker.prototype中查找隐藏功能

注释掉以下条件，该条件比较新选择的日期范围和旧选择的日期范围

 hide: function (e) { this.container.hide(); //Below is the condition that checks for date range changes //if (!this.startDate.isSame(this.oldStartDate) || !this.endDate.isSame(this.oldEndDate)) this.notify(); this.oldStartDate = this.startDate.clone(); this.oldEndDate = this.endDate.clone(); $(document).off('mousedown', this.hide); this.element.trigger('hidden', { picker: this });

}，

或者在hide函数中注释this.notify（）并将其放在clickApply：function中

    clickApply: function (e) {
        this.updateInputText();
        this.hide();
        this.notify();
    },

Answer 3

 $(function () { $('#start_date_id').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') + "'"); }); });

 <html> <head> <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" /> </head> <body> <input type="text" id="start_date_id" name="daterange" /> <script> $(function() { $('input[name="daterange"]').daterangepicker({ opens: 'left' }, function(start, end, label) { console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD')); }); }); </script> </body> </html>

Answer 4

出于某种原因，我不得不将on('apply.daterangepicker', ...)设置为超时（ setTimeout(..., 1000) ），以便我的应用按钮在某些情况下工作。 我不知道为什么。

daterangepicker 应用按钮不能正常工作

问题描述

4 个解决方案

解决方案1
5 2015-07-28 10:14:50

解决方案2
4 2016-06-22 09:18:09

解决方案3
1 2018-07-11 14:01:14

解决方案4
0 2023-02-01 11:37:25

daterangepicker 应用按钮不能正常工作

问题描述

4 个解决方案

解决方案1 5 2015-07-28 10:14:50

解决方案2 4 2016-06-22 09:18:09

解决方案3 1 2018-07-11 14:01:14

解决方案4 0 2023-02-01 11:37:25

解决方案1
5 2015-07-28 10:14:50

解决方案2
4 2016-06-22 09:18:09

解决方案3
1 2018-07-11 14:01:14

解决方案4
0 2023-02-01 11:37:25