简介
Zebra_datepicker 是一个轻量级、易于使用的 JavaScript 日期选择器。它可以很方便地集成到你的前端项目中，提供良好的用户体验。本文将介绍如何安装和使用 Zebra_datepicker。
安装
你可以通过 NPM 安装 Zebra_datepicker：
npm install zebra_datepicker
使用
在安装完成后，你需要加载 Zebra_datepicker 的 CSS 和 JavaScript 文件。你可以将这些文件从 node_modules/zebra_datepicker/dist 目录下复制到你的项目中，然后在 HTML 中引入它们：
<link rel="stylesheet" href="/path/to/zebra_datepicker.min.css"> <script src="/path/to/zebra_datepicker.min.js"></script>
接下来，你可以创建一个 input 元素，并给它添加一个 id 属性（例如 "datepicker"）。然后，在 JavaScript 中使用以下代码初始化 Zebra_datepicker：
new Zebra_DatePicker(document.getElementById('datepicker'));现在，当用户点击 input 元素时，他们将看到一个交互式的日期选择器。用户可以选择一个日期，该日期将自动填充到 input 元素中。
配置选项
Zebra_datepicker 提供了一系列配置选项，以帮助你自定义日期选择器的外观和行为。以下是一些常用的选项：
- show_icon：是否显示日历图标（默认值为 true）。
- direction：日历弹出的方向（"up"、"down"、"auto"）。
- format：日期格式（例如 "Y-m-d"）。
- disabled_dates：禁用的日期（例如 ["2023-04-01", "2023-04-02", "2023-04-03"]）。
你可以通过在 Zebra_datepicker 的构造函数中传递一个选项对象来配置它。例如：
new Zebra_DatePicker(document.getElementById('datepicker'), {
show_icon: false,
direction: 'up',
format: 'Y-m-d',
disabled_dates: ['2023-04-01', '2023-04-02', '2023-04-03']
});事件
Zebra_datepicker 还提供了一些事件，以便你可以在日期选择器的不同阶段执行自定义代码。以下是一些常用的事件：
- onSelect：当用户选择日期时触发。
- onChange：当日期选择器的值更改时触发。
- onShow：当日期选择器显示时触发。
- onHide：当日期选择器隐藏时触发。
你可以通过将事件处理程序函数赋给选项对象中的相应属性来添加事件监听器。例如：
-- -------------------- ---- -------
--- ------------------------------------------------------- -
--------- -------------- --------- -
----------------- -------- ------- ------------------------------
--
------- -------------- --------- -
----------------------- ---------
--
------- -------------- --------- -
----------------------- ----------
-
---示例代码
下面是一个完整的示例，演示如何使用 Zebra_datepicker：
-- -------------------- ---- -------
--------- -----
------
------
----------------------- ----------
----- ---------------- -----------------------------------------
-------
------
-------------------- -------
------ ------------------------------
------ ----------- ----------------
------- ------------------------------------------------
--------
--- ------------------------------------------------------- -
---------- -----
---------- -------
------- --------
--------------- -------------- ------------- --------------
--------- -------------- --------- -
----------------- -------- ------- ------------------------------
--
------- -------------- --------- -
-------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------