日期范围选取器如何在输入日期时触发事件

我正在使用Dan Grossman的daterangepicker。

http://www.dangrossman.info/2012/08/20/a-date-range-picker-for-twitter-bootstrap/

这是在我的网页中初始化的，现在我正在尝试编写一旦用户输入日期就会实现的javascript。 但是我遇到了使用daterangepicker来触发事件的困难。

我正在使用的代码是

$('#dateRange').on('changeDate', function(ev){ alert(ev); }); 

这是初始化daterangepicker的代码

 $('#dateRange').daterangepicker({ ranges: { 'Today': [moment(), moment()], 'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)], 'Last 7 Days': [moment().subtract('days', 6), moment()], 'Last 30 Days': [moment().subtract('days', 29), moment()], 'This Month': [moment().startOf('month'), moment().endOf('month')], 'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')] }, startDate: moment().subtract('days', 29), endDate: moment() }, function(start, end) { $('#dateRange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY')); }); 

我已经尝试了很多不同的方式来监听事件，比如on.('blur')或on.('enter')但没有任何东西可以为我开火。

Answer 1

这部分是回调函数：

 function(start, end) { $('#dateRange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY')); } 

您可以在此function中添加您想要的任何代码，以便在用户选择日期时执行。 你甚至可以自己定义一个回调函数并将其传递给daterange选择器方法。

例：

 function myCallback(start, end) { $('#dateRange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY')); alert('hello world'); //etc, your code here } // attach daterangepicker plugin $('#dateRange').daterangepicker(options, myCallback); 

您甚至可以定义自己的自定义事件处理程序并在回调中触发它。

例

 $(document).on('myCustomEvent', function () { // your code here }); $('#dateRange').daterangepicker({ // .. // function(start, end) { $('#dateRange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY')); $(document).trigger('myCustomEvent'); }); 

Answer 2

来自daterangepicker.com：

 $('#daterange').on('apply.daterangepicker', function(ev, picker) { alert ('hello'); });