Daterangepicker

Date Range Picker with two different inputs

Daterangepicker is a JavaScript component for choosing date ranges, dates and times.
While the documentation is very straight forward regarding the use of a single element, the date range picker can also be used on two elements which will produce a two part date range rather than one.
This can also be found here in more detail.

$('#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) {
        var selectedStartDate = start.format('DD-MM-YYYY'); // selected start
        var selectedEndDate = end.format('DD-MM-YYYY'); // selected end

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

        $checkinInput.val(selectedStartDate);
        $checkoutInput.val(selectedEndDate);

        checkOutPicker.setStartDate(selectedStartDate);
        checkOutPicker.setEndDate(selectedEndDate);

        checkInPicker.setStartDate(selectedStartDate);
        checkInPicker.setEndDate(selectedEndDate);
});