How to use flatpickr.js to create a range inputs?

Question

I am trying to use the flatpickr plugin to create a range like pickers accross two different inputs. One input would be for the From and the other one for To.

I tried the following but the minDate and maxDate are not getting set as expected

document.addEventListener('DOMContentLoaded', function () {

    let dateTimeFrom = document.getElementById('From');
    let dateTimeTo = document.getElementById('To');


    let dateTimeFromPicker = flatpickr(dateTimeFrom, {
        enableTime: true,
        dateFormat: 'n/j/Y h:i K',
        onChange: function (selectedDates, dateStr, instance) {
            dateTimeTo.set('minDate', selectedDates[0]);
        }
    });

    let dateTimeToPicker = flatpickr(dateTimeTo, {
        enableTime: true,
        dateFormat: 'n/j/Y h:i K',
        onChange: function (selectedDates, dateStr, instance) {
            dateTimeFrom.set('maxDate', selectedDates[0]);
        }
    });
});

How can I correctly set the range across two inputs?

Answer 1

I was able to get it to work using the following snippet

document.addEventListener('DOMContentLoaded', function () {
        let dateTimeFrom = document.getElementById('From');
        let dateTimeTo = document.getElementById('To');
        let dateTimeToPicker = null;
        let dateTimeFromPicker = flatpickr(dateTimeFrom, {
            enableTime: true,
            dateFormat: 'n/j/Y h:i K',
            onChange: function (selectedDates, dateStr, instance) {
                dateTimeToPicker.set('minDate', selectedDates[0]);
            }
        });

        dateTimeToPicker = flatpickr(dateTimeTo, {
            enableTime: true,
            dateFormat: 'n/j/Y h:i K',
            onChange: function (selectedDates, dateStr, instance) {
                dateTimeFromPicker.set('maxDate', selectedDates[0]);
            }
        });
   
});