Date Range Picker, how to trigger an event when entering a date

Question

I am using Dan Grossman daterangepicker.

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

Which is initialized on my web page, and now I am trying to write javascript that will be implemented after the date is entered by the user. However, I ran into difficulties in getting the daterangepicker to fire an event.

The code I'm using is

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

And here is the code that initializes 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')); }); 

I tried many different ways to listen for an event, such as on.('blur') or on.('enter') , but for me this does not work.

Answer 1

this section is a callback function:

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

you can add any code that you want this function to be executed when the user selects a date. you can even define a callback function yourself and pass it to the daterange selection method.

Example:

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

You can also define your own custom event handler and call it also in the callback.

Example

 $(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

From daterangepicker.com:

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