如何在 flatpickr-day 元素上添加双击事件
How can I add a double click event on a flatpickr-day element
我有一些带有日期和时间的 flatpickr 日历,我想在双击日历中的 flatpickr-day 元素时关闭日历。
我尝试在 flatpickr 选项的 onOpen 字段中添加双击监听器
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-time 元素,如果我没有时间元素,默认情况下日历将在 flatpickr-day 元素内单击关闭,但我也确实需要时间元素。
你的代码有很多问题 -
首先你的input
是一个普通的输入,你需要添加属性data-input
以便你的flatpickr工作。
<input type='text' id='date' class='calendar' data-input/>
在 onOpen
函数 - [...instance.calendarContainer.querySelectorAll("flatpickr-day")]
中,flatpickr-day
是一个 class 而不是独立元素。您可以通过 .flatpickr-day
.
select
[...instance.calendarContainer.querySelectorAll(".flatpickr-day")]
您需要使用 https://flatpickr.js.org/events/ 的事件,而不是 dblclick
使用 onChange
.
这是工作 fiddle - 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;
}));
},
我有一些带有日期和时间的 flatpickr 日历,我想在双击日历中的 flatpickr-day 元素时关闭日历。
我尝试在 flatpickr 选项的 onOpen 字段中添加双击监听器
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-time 元素,如果我没有时间元素,默认情况下日历将在 flatpickr-day 元素内单击关闭,但我也确实需要时间元素。
你的代码有很多问题 -
首先你的input
是一个普通的输入,你需要添加属性data-input
以便你的flatpickr工作。
<input type='text' id='date' class='calendar' data-input/>
在 onOpen
函数 - [...instance.calendarContainer.querySelectorAll("flatpickr-day")]
中,flatpickr-day
是一个 class 而不是独立元素。您可以通过 .flatpickr-day
.
[...instance.calendarContainer.querySelectorAll(".flatpickr-day")]
您需要使用 https://flatpickr.js.org/events/ 的事件,而不是 dblclick
使用 onChange
.
这是工作 fiddle - 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;
}));
},