Flatpickr: How to get from/to date on "range" mode

Created on 22 Mar 2017  路  3Comments  路  Source: flatpickr/flatpickr

Hello,

How do I get the selected dates on "range" mode? I want to know it on "yyyy-mm-dd" format.

Thanks!

Most helpful comment

@ibarral use this onChange hook.

new Flatpickr(yourElement, {
    onChange: [function(selectedDates){
        const dateArr = selectedDates.map(date => this.formatDate(date, "Y-m-d"));
    }]
}

All 3 comments

Similar to what i said in https://github.com/chmln/flatpickr/issues/678#issuecomment-286909031
Here you have an example:

mode: 'range',
onChange: function(selectedDates, dateStr, instance){
    var from = selectedDates[0].getFullYear() + "-" + numeroAdosCaracteres(selectedDates[0].getMonth() + 1) + "-" + numeroAdosCaracteres(selectedDates[0].getDate()); 

    var to = selectedDates[1].getFullYear() + "-" + numeroAdosCaracteres(selectedDates[1].getMonth() + 1) + "-" + numeroAdosCaracteres(selectedDates[1].getDate()); 
},

And

function numeroAdosCaracteres( fecha ) {
    if (fecha > 9){
        return ""+fecha;
    }else{
        return "0"+fecha;
    }
}

@ibarral use this onChange hook.

new Flatpickr(yourElement, {
    onChange: [function(selectedDates){
        const dateArr = selectedDates.map(date => this.formatDate(date, "Y-m-d"));
    }]
}

Full code: (ID_START & ID_END - Your 2 input id)

var Example = $('#ID_START').flatpickr({
        mode:'range',
        ariaDateFormat:'d.m.Y',
        dateFormat:'d.m.Y',
        onChange:function(selectedDates){
            var _this=this;
            var dateArr=selectedDates.map(function(date){return _this.formatDate(date,'d.m.Y');});
            $('#ID_START').val(dateArr[0]);
            $('#ID_END').val(dateArr[1]);
        },
    });

And also for second input can be open with same calendar:
<input type="text" id="ID_END" onclick="Example.open();">

Was this page helpful?
0 / 5 - 0 ratings

Related issues

deangibson89 picture deangibson89  路  3Comments

pimskie picture pimskie  路  3Comments

rafaelrenanpacheco picture rafaelrenanpacheco  路  4Comments

Spoki4 picture Spoki4  路  3Comments

T-Hugs picture T-Hugs  路  3Comments