Как добавить событие двойного щелчка на элемент flatpickr-day - PullRequest
Новая
       28

Как добавить событие двойного щелчка на элемент flatpickr-day

0 голосов
/ 24 мая 2019

У меня есть несколько календарей 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,но мне тоже нужен элемент времени.

Ответы [ 2 ]

0 голосов
/ 24 мая 2019

Не совсем идеальное решение, но оно выполняет работу для того, что мне сейчас нужно: 

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;
                }));
            },
0 голосов
/ 24 мая 2019

Есть много проблем с вашим кодом -

Прежде всего, ваш 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.

...