daterangepicker two different inputs


I have two different daterangepicker in the same form, because I need to have it in two inputs nor only in one.. So I initialize this with a class selector:

everithing works perfect, but I want to do change two both. If I select a range in the first one, when I open the second one I want to have the same range selected in the calendars. So I’m trying to do it in ON SHOW event

.on('apply.daterangepicker' ,function(ev, picker) {
.on('show.daterangepicker' ,function(ev, picker){



Only changes the first one. How can I do it?


i was facing the same problem but found the Solution, this may help you:

Have a look at my code:

    if($('#search_checkin, #search_checkout').length){
    // check if element is available to bind ITS ONLY ON HOMEPAGE
    var currentDate = moment().format("DD-MM-YYYY");

    $('#search_checkin, #search_checkout').daterangepicker({
        locale: {
              format: 'DD-MM-YYYY'
        "alwaysShowCalendars": true,
        "minDate": currentDate,
        "maxDate": moment().add('months', 1),
        autoApply: true,
        autoUpdateInput: false
    }, function(start, end, label) {
      // console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");
      // Lets update the fields manually this event fires on selection of range
      var selectedStartDate = start.format('DD-MM-YYYY'); // selected start
      var selectedEndDate = end.format('DD-MM-YYYY'); // selected end

      $checkinInput = $('#search_checkin');
      $checkoutInput = $('#search_checkout');

      // Updating Fields with selected dates

      // Setting the Selection of dates on calender on CHECKOUT FIELD (To get this it must be binded by Ids not Calss)
      var checkOutPicker = $'daterangepicker');

      // Setting the Selection of dates on calender on CHECKIN FIELD (To get this it must be binded by Ids not Calss)
      var checkInPicker = $'daterangepicker');


} // End Daterange Picker

please let me know if you want me to explain.

Answered By – Bilal Mustafa

Answer Checked By – David Goodson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.