I am using daterangepicker please check my code here JSFIDDLE

I have set default date

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

And I have set an alert() for checking my code is working or not.

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

When I am clicking on book_date textbox range calendar is appearing. If i am changeing any date and clicking apply button its working fine. My alert() box is showing perfect. But when i click apply button without change any date. That time alert() box is not showing.

Also book_date is getting default date after clicking textbox and click anywhere in the page. So i don't want to put any default date without cilcking particular date. textbox should be blank while clicking ouside of calendar.

My Edited Code:

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

My textbox Calendar getting default value if i am not select any and clicking outside anywhere of the page.

I am using daterangepicker please check my code here JSFIDDLE

I have set default date

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

And I have set an alert() for checking my code is working or not.

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

When I am clicking on book_date textbox range calendar is appearing. If i am changeing any date and clicking apply button its working fine. My alert() box is showing perfect. But when i click apply button without change any date. That time alert() box is not showing.

Also book_date is getting default date after clicking textbox and click anywhere in the page. So i don't want to put any default date without cilcking particular date. textbox should be blank while clicking ouside of calendar.

My Edited Code:

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

My textbox Calendar getting default value if i am not select any and clicking outside anywhere of the page.

• javascript
• jquery
• calendar
• daterangepicker

4 Answers 4

The callback function only executes when a new date is selected. As a possible work-around you could use the apply.daterangepicker event, which is triggered when the apply button is clicked:

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

See an example here.

Extended answer

There is no in-built way to prevent the dates being set when you click off the date picker, so you could try this:

Customise the hide function so the dates are cleared whenever the date picker is closed:

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

Update the apply function to populate the dates field accordingly. So the dates are only set when the apply button is clicked:

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

Updated demo here.

When we click apply button then callback function executes but there is condition. If the date range is changed then callback function will execute otherwise it will not execute. If you want to execute it every time when you click apply button regard less of date range changed or not then do following steps.

1. Open daterangepicker.js

2. Find hide function in DateRangePicker.prototype

3. Comment out the following condition which pares the new selected date range and old selected date range

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

   },

or also ment this.notify() in hide function and place it in clickApply: function

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

$(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/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr/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>

For some reason I had to put the on('apply.daterangepicker', ...) on a timeout (setTimeout(..., 1000)) for my apply button to work in certain situations. I could not figure out why.