什么是 flatpickr?
flatpickr 是一个轻量级、快速和易于使用的日期时间选择器，适用于 Web 应用程序。它可以让用户方便地选择日期和时间，并支持多种语言以及自定义主题。
安装和使用
要使用 flatpickr ，我们需要先使用 npm 安装：
--- ------- ---------
然后，在 HTML 文件中，我们需要引入以下文件：
----- ---------------- ----------------------------------------------------- ------- ------------------------------------------------------------
现在，我们已经安装并引入了 flatpickr ，接下来就可以创建一个简单的日期选择器了。首先，我们需要在 HTML 中创建一个输入框：
------ ----------- ----------------
然后，在 JavaScript 中，我们需要创建 flatpickr 实例：
----- ---------- - -------------------------------------- ----------------------
这样就可以在页面上生成一个默认的日期选择器。
更多配置选项
除了默认设置之外，flatpickr 还提供了很多其他的配置选项。例如，我们可以更改日期格式、自定义主题、添加禁用日期等等。
更改日期格式
要更改日期格式，我们可以在创建 flatpickr 实例时传入 dateFormat 配置选项：
--------------------- - ----------- -------- ---
这会将日期格式更改为“年-月-日”。
自定义主题
要自定义 flatpickr 的主题，我们可以通过引入不同的样式文件来实现。例如，要使用 Material Design Lite 主题，我们可以在 HTML 中引入以下文件：
----- ---------------- -----------------------------------------------------------------
然后，在创建 flatpickr 实例时，我们需要指定主题名称：
--------------------- - ------ ----------------- ---
这会将 flatpickr 更改为 Material Design Lite 主题。
禁用日期
要禁用某些日期，我们可以在创建 flatpickr 实例时传入 disabledDates 配置选项。例如，要禁用今天之前的所有日期，我们可以这样做：
--------------------- -
----------- --------
-------- -
-
----- --- -----------------------------------
--- --------
--
--
---这会将所有今天之前的日期禁用。
示例代码
下面是一个完整的示例代码，展示如何使用 flatpickr 创建一个日期选择器，并更改日期格式、自定义主题和禁用日期：
--------- -----
----- ----------
------
----- ----------------
---------------- ---------------
----- ---------------- -----------------------------------------------------
----- ---------------- -----------------------------------------------------------------
-------
------
------ ----------- ----------------
------- ------------------------------------------------------------
--------
----- ---------- - --------------------------------------
--------------------- -
----------- --------
------ -----------------
-------- -
-
----- --- -----------------------------------
--- --------
--
--
---
---------
-------
-------总结
flatpickr 是一个非常有用的日期时间选择器，可以方便地让用户选择日期和时间。在本文中，我们学习了如何安装和使用 flatpickr，以及如何更改日期格式、自定义主题和禁用日期等配置选项。希望这篇文章能够帮助你学习并使用 flatpick
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/32560