时间戳

首页 > 解决方案 > 如何在 flatpickr-day 元素上添加双击事件

javascript - 如何在 flatpickr-day 元素上添加双击事件

问题描述

我有一些带有日期和时间的 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 元素，如果我没有 time 元素，日历将在默认情况下在 flatpickr-day 元素内单击时关闭，但我确实需要时间元素也是如此。

标签： javascriptflatpickr

解决方案

您的代码有很多问题-

首先你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/的事件，而不是dblclickuse onChange。

这是工作小提琴 - https://jsfiddle.net/mkwa9bhv/

注意 - 声明的变量const不会被提升。在顶部声明const calendars = flatpickr(".calendar", flatpckr_options);，以便在您的flatpckr_options.

推荐阅读