时间戳

首页 > 解决方案 > 有没有办法在`flatpickr`的onChange事件中区分时间选择事件和日历事件？

javascript - 有没有办法在`flatpickr`的onChange事件中区分时间选择事件和日历事件？

问题描述

在触发事件flatpickr时，我找不到将时间选择事件与日历事件区分开来的方法。onChange

const instance = flatpickr(flatpickrRef.current, {
   mode: 'range',
   enableTime: true,
   time_24hr: true,
   defaultDate: defaultDate as unknown as number,
   disable: [
     date => {
       return date > new Date();
     },
   ],
   positionElement: positionElementRef.current,
   onClose,
   onChange,
});

标签： javascriptreactjsflatpickr

解决方案

mousedown选择日期或更改时间时触发事件

const instance = flatpickr(".flatpickr", {
  mode: 'range',
  enableTime: true,
  time_24hr: true,
  disable: [
    date => {
      return date > new Date();
    },
  ],
  onChange: () => {
    console.log(event ? 'Date Changed' : 'Time Changed')
  },
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<div class="flatpickr">
  <input name="test" value="03.07.2019" type="text" data-input>
  <a class="input-button" title="toggle" data-toggle>
    <i class="icon-calendar"></i>
  </a>
</div>

推荐阅读