flatpickr:将第二个日期选择器的日期设置为与第一个日期选择器的日期相同

时间:2019-05-29 17:04:34

标签: javascript jquery calendar flatpickr

我正在使用Flatpikr https://flatpickr.js.org/ 我想在出站(仅日期)选择器的关闭事件上将返回选择器的初始日期设置为第一个选择器中的相同日期。 我编写了此代码,该代码有效,但未切换到正确的月份页面,它只是禁用了出站选择器中所选日期之前的所有日期。 在这里,您可以查看预订表格中的内容。

https://anekitalia.com/en/

我试图在on close函数中使用defaultDate而不是minDate,但是它不起作用。

<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>

1 个答案:

答案 0 :(得分:0)

通过添加setDate(dateObj)并将onClose事件更改为onChange来解决此问题,因此代码现在看起来像这样

<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>