在前端开发中，日期时间选择器是常用的 UI 组件之一。随着 Node.js 生态圈的壮大，越来越多的开源社区为我们提供了优秀的日期时间选择器组件，例如 tz-datetimepicker。
tz-datetimepicker 是一个基于 JavaScript 的日期时间选择器组件，支持自定义样式，可以应用于各种场景。本篇文章将详细介绍如何使用 tz-datetimepicker，以及如何自定义其样式和功能。
安装 tz-datetimepicker
tz-datetimepicker 可以通过在终端中输入以下命令来安装：
npm install tz-datetimepicker
或者，你也可以通过在你的 HTML 文件中加入以下 <script> 标签来直接引入该组件：
<script src="https://cdn.jsdelivr.net/npm/tz-datetimepicker@1.0.0/dist/tz-datetimepicker.min.js"></script>
关于 tz-datetimepicker 更详细的介绍和 API，可以在其 官方文档 中查看。
使用 tz-datetimepicker
使用 tz-datetimepicker 的第一步是在你的 HTML 页面中添加一个日期时间选择器元素，例如：
<input type="text" id="my-datepicker" />
然后，你需要调用 tz-datetimepicker 的构造函数来初始化该日期时间选择器。如下所示：
const datePicker = new TzDatepicker("#my-datepicker", options);其中，第一个参数是要初始化的日期时间选择器元素的选择器。第二个参数是一个配置对象，你可以在其中指定该日期时间选择器的一些设置，例如：
-- -------------------- ---- -------
----- ------- - -
----- ---------- -- ----------------------- ------ -----
----------- ------------- -- -----
----------- -------- -- -----
---------------- ----- -- -----------
--------- -------- ------ -
------------------
-- -- ----------------
--在启用 tz-datetimepicker 之后，你需要监听 change 事件，以响应用户选择日期的行为。例如：
datePicker.on("change", function (date) {
console.log(date);
});自定义样式和功能
tz-datetimepicker 提供了很多的选项，允许你自定义日期时间选择器的样式和功能。以下是一些你可以设置的选项：
样式
theme：日期时间选择器的主题，可以是light或dark。prevIcon：日期时间选择器上一页按钮的图标。nextIcon：日期时间选择器下一页按钮的图标。todayBtn：是否显示 “今天” 按钮。clearBtn：是否显示 “清空” 按钮。applyBtn：是否显示 “应用” 按钮。
以下是一个自定义样式的例子：
-- -------------------- ---- ------- ----- ------- - - ----- ---------- ------ ------- -- -- ------ -- --------- --- ---------- ----------------------- -- -- ------------- --- --------- --- ---------- ------------------------ -- -- ------------- --- --------- ----- --------- ----- --------- ----- --
功能
disableDates：禁用指定的日期，例如["2022-10-01", "2022-10-02", "2022-10-03"]。disableDaysOfWeek：禁用指定的星期，例如[0, 6]表示禁用周日和周六。minDate：最小可选择日期。maxDate：最大可选择日期。
以下是一个禁用指定日期的例子：
const options = {
mode: "default",
disableDates: ["2022-10-01", "2022-10-02", "2022-10-03"], // 禁用 2022 年 10 月 1、2、3 日
onSelect: function (date) {
console.log(date);
},
};示例代码
最后，我们来看一个完整的示例代码。这个例子是一个可配置的日期时间选择器，支持自定义主题和启用/禁用日期等功能：
-- -------------------- ---- -------
--------- -----
------
------
--------- ---------- -----------
-----
----------------
------------------------------------------------------------------------------------------
--
-----
----------------
-----------------------------------------------------------------------------------------------------
--
-----
----------------
---------------------------------------------------------------
-----------------------------------------------------------------------------------
-----------------------
--
-------
---- -
------- --
-------- --
-
-------- -
-------- -----
---------------- -------
------------ -------
------- ------
-
--------------------- -
-------- -------------
-
--------
-------
------
---- ----------------
---- -----------------------------
------ ----------- ------------------ --
------
------
------- --------------------------------------------------------------------------------------------------
--------
----- ---------- - --- ------------------------------ -
----- ----------
------ -------
------------- -------------- ------------- --------------
-------- -------------
-------- -------------
---------------- -----
--------- -----
--------- -----
--------- -----
--------- --- ---------- -----------------------
--------- --- ---------- ------------------------
--------- -------- ------ -
------------------
--
---
----------------------- -------- ------ -
------------------
---
---------
-------
-------总结
tz-datetimepicker 是一个功能强大且灵活的日期时间选择器组件，可以帮助你轻松地添加日期选择功能到你的网站或应用程序中。通过本文的介绍，你应该已经学习到了使用 tz-datetimepicker 的方法，以及如何自定义其样式和功能。希望这篇文章对你有所指导。\1
参考链接
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cb481e8991b448da259