Question

128

flatpickr: set date of a second date picker to the same date of the first one

rated 0 times [ 131] [ 3] / answers: 1 / hits: 16558 / 5 Years ago, wed, may 29, 2019, 12:00:00

I'm using flatpikr https://flatpickr.js.org/
I want on close event of an outbound (only date) picker, to set the initial date of the return picker to the same date selected in the first one.
I wrote this code which is working, but is not switching to the correct month page, it simply disables all the dates before the selected one in the outbound picker.
Here you can check what happens in the booking form.

https://anekitalia.com/en/

I have tried to use defaultDate instead of minDate in the on close function but it doesn't works.

<script>

 $( function() {

 /*selecting datepiker language*/

 flatpickr.localize(flatpickr.l10ns.en);

 /*declaring return datepicker*/

 var FLATPICKER_RITORNO = flatpickr('#cal_DATA_RITORNO', {

 altInput: true,

 altFormat: j F, Y,

 dateFormat: d-m-Y, 

 disableMobile: true,

 maxDate: new Date().fp_incr(365),

 });

 /*declaring outbound datepicker*/

 $(#cal_DATA_ANDATA).flatpickr(

 {

 altInput: true,

 altFormat: j F, Y,

 dateFormat: d-m-Y,

 disableMobile: true,

 minDate: today,

 maxDate: new Date().fp_incr(365),

 defaultDate: today,

 /* setting initial date of return picker to the one selected in 

 outbound*/

 onClose: function( selectedDates, dateStr, instance ) {

 FLATPICKER_RITORNO.set( 'minDate', dateStr)}

 });

 } );

</script>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

paolam

Add To Favorites

Follow

Total Points: 437

Total Questions: 107

Total Answers: 106

Location: Aland Islands

Member since Wed, Nov 17, 2021

3 Years ago

answered 5 Years ago brandt · Accepted Answer

fixed this by adding setDate(dateObj) and changing the onClose event to onChange so code now will look like this

<script>

  $(function () {

    /*selecting datepiker language*/

    flatpickr.localize(flatpickr.l10ns.en);

    /*declaring return datepicker*/

    var FLATPICKER_RITORNO = flatpickr('#cal_DATA_RITORNO', {

      altInput: true,

      altFormat: j F, Y,

      dateFormat: d-m-Y,

      disableMobile: true,

      maxDate: new Date().fp_incr(365),

      defaultDate: today

    });

    /*declaring outbound datepicker*/

    $(#cal_DATA_ANDATA).flatpickr(

      {

        altInput: true,

        altFormat: j F, Y,

        dateFormat: d-m-Y,

        disableMobile: true,

        minDate: today,

        maxDate: new Date().fp_incr(365),

        defaultDate: today,

        /* setting initial date of return picker to the one selected in 

        outbound*/

        onChange: function (dateStr, dateObj) {

          FLATPICKER_RITORNO.set(minDate, dateObj);

          FLATPICKER_RITORNO.setDate(dateObj);

        }

      });

  });

</script>