介绍
flatpickr 是一个基于 JavaScript 的日期和时间选择器，其支持多种语言和样式，并且体积小巧。@kddy/flatpickr 是 flatpickr 的一个改进版，提供了一些增强功能并修复了一些原有的 issue。在日常的前端开发中，日期和时间选择器是非常常见的组件，因此掌握如何使用 @kddy/flatpickr 对于前端工程师来说是一项基本技能。
安装
在使用 @kddy/flatpickr 之前，我们需要先通过 npm 安装它，可以通过以下命令进行安装：
npm install @kddy/flatpickr
然后在需要使用的文件中引入它：
import flatpickr from '@kddy/flatpickr';
使用
使用 flatpickr 可以采用两种方式，一种是通过 class 或者 id 直接绑定，另一种是通过 JavaScript 代码进行初始化。
直接绑定
@kddy/flatpickr 可以很方便地通过 html 中的 class 或者 id 进行绑定。例如：
<input class="flatpickr" />
在 JavaScript 代码中，添加如下代码即可实现绑定：
flatpickr(".flatpickr");通过上述代码即可生成一个日期选择器。
JavaScript 初始化
除了直接绑定之外，还可以通过 JavaScript 代码进行初始化。例如：
const input = document.querySelector("input");
flatpickr(input);flatpickr 的第一个参数可以通过 class 或者 id 来指定，也可以直接传入一个 DOM 元素。
基本配置
当然，在实际使用时，我们还需要对日期选择器进行配置，比如设置日期格式、语言、默认日期等等。
flatpickr(".flatpickr", {
dateFormat: "Y-m-d", // 日期格式
locale: "zh", // 语言
defaultDate: "2022-01-01" // 默认日期
});上述代码实现了以下功能：
dateFormat：设置日期格式为年-月-日locale：设置语言为中文defaultDate：设置默认日期为2022-01-01
指定时间范围
除了基本配置之外，还可以指定时间范围，这是 flatpickr 的一个常用功能。如果需要限制选择的日期范围，可以使用 minDate 和 maxDate 参数。
flatpickr(".flatpickr", {
minDate: "2022-01-01", // 最小时间
maxDate: "2022-12-31" // 最大时间
});上述代码设置了选择日期的范围为 2022-01-01 到 2022-12-31。
当然，也可以不指定具体日期，而是采用一些相对的表示方法。
flatpickr(".flatpickr", {
minDate: "today", // 最小时间为当天
maxDate: new Date().fp_incr(30) // 最大时间为 30 天后
});上述代码将最小日期设置为当天，最大日期设置为 30 天后。fp_incr 是 flatpickr 提供的一个方法，用于计算相对日期。
事件监听
在实际开发中，我们通常需要监听日期选择的事件，比如用户选择日期后需要做一些其他操作。@kddy/flatpickr 提供了一些常用的事件，比如 onChange、onClose、onMonthChange 等，可以通过以下方式进行监听：
flatpickr(".flatpickr", {
onChange: function(selectedDates, dateStr, instance) {
console.log(dateStr); // 选中日期
},
onClose: function(selectedDates, dateStr, instance) {
console.log(dateStr); // 关闭日期选择器
}
});上述代码实现了以下功能：
onChange：当用户选择 ( 或者删除 ) 日期时被触发。onClose：当日期选择器关闭时被触发。
其他扩展功能
@kddy/flatpickr 还提供了一些其他的扩展功能，比如主题、时间选择器、插件等等。如果需要使用这些功能，可以借助 flatpickr 底层的插件机制进行扩展。具体可以参考 官方文档。
示例代码
最后，上述所有内容的完整代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
---------------- ------------
-----
----------------
---------------------------------------------------------------------------------------
--
-------
------
------ ----------------- --
------- ------------------------------------------------------------
--------
----------------------- -
----------- -------- -- ----
------- ----- -- --
------------ ------------- -- ----
-------- -------- -- -------
-------- --- ------------------- -- ----- -- --
--------- ----------------------- -------- --------- -
--------------------- -- ----
--
-------- ----------------------- -------- --------- -
--------------------- -- -------
-
---
---------
-------
-------在上述代码中，我们引入了 material_orange 主题，并且设置了一些常用的配置，比如日期格式、语言、默认日期等等。同时，也监听了日期选择器的 onChange 和 onClose 事件，方便后续进行其他操作。
总结
@kddy/flatpickr 提供了一种简单、易用且高度可定制的日期选择器方案，可以帮助我们在前端开发中快速构建日期选择器，提高工作效率。希望通过本文的介绍和示例，读者们可以更好地掌握 @kddy/flatpickr 的使用方法，同时也能够熟练应用其强大的定制功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d630d0927023822c32