flatpickr:将第二个日期选择器的日期设置为与第一个日期选择器相同的日期
flatpickr: set date of a second date picker to the same date of the first one
我正在使用 flatpikr https://flatpickr.js.org/
我想在出站(仅日期)选择器的关闭事件中,将 return 选择器的初始日期设置为第一个选择器中选择的相同日期。
我编写了这段有效的代码,但没有切换到正确的月份页面,它只是禁用了出站选择器中所选日期之前的所有日期。
您可以在这里查看预订表格中发生的情况。
https://anekitalia.com/en/
我尝试在关闭函数中使用 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>
通过添加 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>
我正在使用 flatpikr https://flatpickr.js.org/ 我想在出站(仅日期)选择器的关闭事件中,将 return 选择器的初始日期设置为第一个选择器中选择的相同日期。 我编写了这段有效的代码,但没有切换到正确的月份页面,它只是禁用了出站选择器中所选日期之前的所有日期。 您可以在这里查看预订表格中发生的情况。
https://anekitalia.com/en/
我尝试在关闭函数中使用 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>
通过添加 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>