Question

我有一些带有日期和时间的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元素内，日历将关闭。确实也需要时间元素。

Answer 1

您的代码有很多问题-

首先，您的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中可用。

Answer 2

一个不太完美的解决方案，但是可以立即完成我需要的工作：

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-day元素上添加双击事件

2 个答案: