I have a range date picker at the moment.

<input id="rangeDatepicker2" class="g-font-size-12 g-font-size-default--md" type="text" data-rp-wrapper="#rangePickerWrapper2" data-rp-type="range" data-rp-date-format="d M Y" data-rp-default-date='["01 Jan 2016", "31 Dec 2017"]'>

I would like to reuse the dates but I am unable to select them for all scenarios. I tried the code below which works great if the date selected are in the same month. But my issue is this bit of code doesn't work if the dates span multiple months.

$("#rangeDatepicker2").change(function () {
    var dates = $('.selected');
    if (dates.length == 2) {
        var start = dates[0].dateObj;
        var end = dates[1].dateObj;

        //interact with selected dates here
    }
});

May I ask how do I properly grab selected date range of a flatpickr.

I have a range date picker at the moment.

<input id="rangeDatepicker2" class="g-font-size-12 g-font-size-default--md" type="text" data-rp-wrapper="#rangePickerWrapper2" data-rp-type="range" data-rp-date-format="d M Y" data-rp-default-date='["01 Jan 2016", "31 Dec 2017"]'>

I would like to reuse the dates but I am unable to select them for all scenarios. I tried the code below which works great if the date selected are in the same month. But my issue is this bit of code doesn't work if the dates span multiple months.

$("#rangeDatepicker2").change(function () {
    var dates = $('.selected');
    if (dates.length == 2) {
        var start = dates[0].dateObj;
        var end = dates[1].dateObj;

        //interact with selected dates here
    }
});

May I ask how do I properly grab selected date range of a flatpickr.

• javascript

Share Improve this question Follow asked Nov 11, 2019 at 18:45 MasterMaster 2,16333 gold badges3636 silver badges9393 bronze badges 1

• Can you add your initialization code? Where you make your "#rangeDatepicker2" a flatpickr – Jimmy Commented Nov 11, 2019 at 20:36

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

Many input plugins actually pass the values in a onChange handler. The values are available there.

Solution

Pass down an onChange handler when initializing flatpickr:

$("#rangeDatepicker2").flatpickr({
    mode: 'range',
    onChange: function(dates) {
        if (dates.length == 2) {
            var start = dates[0];
            var end = dates[1];

            // interact with selected dates here
        }
    }
})

Demo

onChange documentation: https://flatpickr.js/events/#hooks