介绍
npm 包 happyhxcs 是一款简单易用的前端日期时间选择器插件。它支持自定义主题、多语言、时间范围限制等功能，适用于中国大陆、香港、澳门、台湾以及国外的多个国家和地区。
安装
你可以通过 npm 进行安装：
npm install happyhxcs --save
或者使用 Yarn 安装：
yarn add happyhxcs
使用教程
引入 happyhxcs
在 html 中引入 happyhxcs：
<!-- 引入样式文件 --> <link rel="stylesheet" href="dist/happyhxcs.css"/> <!-- 引入 js 文件 --> <script src="dist/happyhxcs.js"></script>
或者在 JavaScript 中引入：
import 'happyhxcs/dist/happyhxcs.css'; import Happyhxcs from 'happyhxcs';
初始化 happyhxcs
使用 Happyhxcs 对象进行初始化：
-- -------------------- ---- ------- ----- ------- - - ------ ----------- -------- - ---------- ---------- -- -------- ------------ -- -- ---------- ---------------------- ------------ ------------- -- ---------- ------------ ----------- -- ---------- ------- ----- -- -------------- --------- ----- -- ------------ ---------------- -- ------------- ------- --- -- -------------------- ------------- ----- -------- -- ----------------------------------------- ------ ---------- -- ------------------------------------------------------------------------- ------- ---- -- --------- -- ----- -------- - -------------------------------------- -- --------- ----- -- ----- ---------- - --- ------------------- --------- -- --------
options 参数说明
- range：时间范围，格式为“开始时间 - 结束时间”，例如：'2019-01-01 00:00:00 - 2025-01-01 23:59:59'。必填项。
- defaultType：时间选择模式，可选值 1：日期模式；2：日期时间模式；3：时间模式。默认为 1。
- defaultDate：默认选中日期，格式为“YYYY-MM-DD”，例如：'2022-05-22'。可选项。
- defaultTime：默认选中时间，格式为“hh:mm:ss”，例如：'12:00:00'。可选项。
- nowBtn：是否显示当前时间按钮。默认为 true。
- clearBtn：是否显示清空按钮。默认为 true。
- confirmBtn：是否显示确认按钮。默认为 true。
- format：日期时间格式，如：'YYYY-MM-DD hh:mm:ss'，默认为空字符串。
- lang：语言环境，可选值：'zh-cn'，'zh-hk'，'zh-tw'，'en'，默认为 'zh-cn'。
- theme：主题，可选值：'default'，'dark'，'blue'，'green'，'pink'，'purple'，'red'，'yellow'，默认为 'default'。
- zIndex：弹出层层级，数字。默认为 1000。
方法
- getDate()：获取当前选中日期，返回格式为“YYYY-MM-DD”。
- getTime()：获取当前选中时间，返回格式为“hh:mm:ss”。
- getDateTime()：获取当前选中日期时间，返回格式为“YYYY-MM-DD hh:mm:ss”。
- setDate(date)：设置选中日期，date 格式为“YYYY-MM-DD”。
- setTime(time)：设置选中时间，time 格式为“hh:mm:ss”。
- setDateTime(dateTime)：设置选中日期时间，dateTime 格式为“YYYY-MM-DD hh:mm:ss”。
- show()：显示日期选择器。
- hide()：隐藏日期选择器。
- destroy()：销毁日期选择器。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- ---------------
----- ---------------- ---------------------------
-------
------
-----
------ --------------- ----------- ------------------- ---------
------
-----
------- -------------------------------
------- -------------------------------
------- -------------------------------------
------
-----
------- -------------------------------
------- -------------------------------
------- -------------------------------------
------
-----
------- ----------------------------
------- ----------------------------
------
------- ---------------------------------
--------
----- ------- - -
------ ----------- -------- - ---------- ----------
------------ --
------------ -------------
------------ -----------
------- -----
--------- -----
----------- -----
------- ---
----- --------
------ ----------
------- ----
--
----- -------- - --------------------------------------
----- ---------- - --- ------------------- ---------
----- ---------- - ----------------------------------------
----- ---------- - ----------------------------------------
----- -------------- - --------------------------------------------
----- ---------- - ----------------------------------------
----- ---------- - ----------------------------------------
----- -------------- - --------------------------------------------
----- ------- - ------------------------------------
----- ------- - ------------------------------------
------------------------------------ -- -- -
----------------------------
---
------------------------------------ -- -- -
----------------------------
---
---------------------------------------- -- -- -
--------------------------------
---
------------------------------------ -- -- -
---------------------------------
---
------------------------------------ -- -- -
-------------------------------
---
---------------------------------------- -- -- -
---------------------------------- -----------
---
--------------------------------- -- -- -
------------------
---
--------------------------------- -- -- -
------------------
---
---------
-------
-------总结
npm 包 happyhxcs 是一款实用的前端日期时间选择器插件，支持多种自定义选项。希望本文的介绍和上面的示例代码，能够帮助读者更好地了解和使用该插件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600575c381e8991b448ea71d