javascript - flatpickr: set date of a second date picker to the same date of the first one - Stack Overflow

admin管理员组

文章数量:1402985

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

Share Improve this question Follow asked May 29, 2019 at 17:04 silvered.dragonsilvered.dragon 48322 gold badges77 silver badges2525 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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>

本文标签： javascriptflatpickr set date of a second date picker to the same date of the first oneStack Overflow