我有一些日常和时间的flatpickr日历,当我双击日历中的flatpickr-day element时,我想关闭calender。
我尝试在flatpickr选项中添加双击侦听器
var flatpckr_options = {
enableTime: true,
altInput: true,
altFormat: "d-m-Y H:i",
dateFormat: "Y-m-d H:i",
time_24hr: true,
allowInput: true,
onOpen: function(selectedDates, dateStr, instance) {
[...instance.calendarContainer.querySelectorAll(".flatpickr-day")].map(x => x.addEventListener('dblclick', function (e) {
calendars.map(x => x.close());
console.log("double click");
}));
}
};
const calendars = flatpickr(".calendar", flatpckr_options);
https://jsfiddle.net/p3e0da6r/2/
但是,双击事件不会在flatpickr-day元素上触发,我该如何工作?
我认为这是因为一旦我单击一天,它就会将重点更改为FlatPickr时间元素,如果我没有时间元素,则默认情况下,日历将在单击flatpickr-day元素内关闭,但是我也需要时间元素。
您的代码有很多问题 -
首先,您的input
是普通输入,您需要添加属性data-input
,以便您的flatpickr工作。
<input type='text' id='date' class='calendar' data-input/>
在onOpen
函数-[...instance.calendarContainer.querySelectorAll("flatpickr-day")]
中,flatpickr-day
是一类,而不是独立元素。您可以通过.flatpickr-day
进行选择。
[...instance.calendarContainer.querySelectorAll(".flatpickr-day")]
您需要使用https://flatpickr.js.org/events/的事件,而不是dblclick
使用onChange
。
这是工作小提琴-https://jsfiddle.net/mkwa9bhv/
注意 - const
声明的变量未悬挂。在顶部声明const calendars = flatpickr(".calendar", flatpckr_options);
,以便在您的flatpckr_options
中可用。
一个不完美的解决方案,但要完成我现在需要的工作:
var new_date = 0, old_date = 0;
// ... inside the flatpickr options, for the onChange event
onChange: function(selectedDates, dateStr, instance) {
old_date = new Date();
[...instance.calendarContainer.querySelectorAll(".flatpickr-day")].map(x => x.addEventListener('mousedown', function (e) {
new_date = new Date();
let diff = new_date - old_date; // in ms < 500ms => double click
if (diff <= 500) {
calendars.map(y => y.close());
}
old_date = new_date;
}));
},