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

Question

I have some flatpickr calendars with day and time, and I want to close the calender when I double click on a flatpickr-day element in the calendar.

I tried to add a double click listener in the flatpickr options, the onOpen field

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/

however the double click event doesn't get triggered on the flatpickr-day element, how can I get it to work?

I think it's because once I click on a day it changes focus to the flatpickr-time element, if I didn't have the time element the calendar would close on single click inside a flatpickr-day element by default, but I do need the time element as well.

Answer 1

There are many issues with your code -

First of all your input is a normal input, you need to add the attribute data-input so that your flatpickr work.

<input type='text' id='date' class='calendar' data-input/>

In the onOpen function - [...instance.calendarContainer.querySelectorAll("flatpickr-day")] , flatpickr-day is a class and not a standalone element. You can select by .flatpickr-day .

[...instance.calendarContainer.querySelectorAll(".flatpickr-day")]

You need to use the event of https://flatpickr.js.org/events/ , instead of dblclick use onChange .

Here is the working fiddle - https://jsfiddle.net/mkwa9bhv/

Note - variables declared with const are not hoisted. Declare const calendars = flatpickr(".calendar", flatpckr_options); at the top, so that it will be available within your flatpckr_options .

Answer 2

A less than perfect solution, but gets the job done for what I need right now:

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;
                }));
            },