Two date inputs synchronized

two-daterangepicker-dates.md

Two date inputs using daterangepicker and jQuery. If the first date gets an update, the second date will also suffer an update if the range of the first date is higher than the second one.

// this.dateRangePicker('#start_at_datepicker', '#start_at_form');
// this.dateRangePicker('#end_at_datepicker', '#end_at_form', true);

dateRangePicker(datepickerInputId, dateInputId, minDate = false) {
    let input = document.querySelector(dateInputId);

    require(['moment','daterangepicker'], (moment) => {
        let dpconf = {
            locale: {
                singleDatePicker: true,
                showDropdowns: true,
                format: 'DD/MM/YYYY HH:mm',
                firstDay: 1,
            },
            singleDatePicker: true,
            showDropdowns: true,
        };

        if (minDate) {
            dpconf.minDate = moment().format('DD/MM/YYYY');
        } else {
            dpconf.minDate = '01/01/2017';
        }

        $(datepickerInputId).daterangepicker(dpconf, (start) => {
            input.value = start.format('YYYY-MM-DD');

            if (input.getAttribute('name') == 'start_at') {
                dpconf.minDate = start.format('DD/MM/YYYY');
                let endAt = document.querySelector('#end_at');

                $('#end_at_datepicker').daterangepicker(
                    dpconf, start => endAt.value = start.format('YYYY-MM-DD')
                );

                if (moment(start).isAfter(endAt.value)) {
                    endAt.value = start.format('YYYY-MM-DD');
                }
            }
        });
    });
}