I'm using flatpikr / 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.

/

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>

I'm using flatpikr https://flatpickr.js/ 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./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>

• javascript
• jquery
• calendar
• flatpickr

1 Answer 1

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>