介绍
wdt-jdatepicker 是针对 Web 应用程序开发的日期选择器 JavaScript 组件。它使用了自己的 CSS，可以自定义颜色和样式。它支持从多个语言中选择，并且可以使用您喜欢的本地化日期格式。它使用了原生 HTML5 日期选择器，所以它是轻量级的，并且易于使用和集成。
安装和引入
使用 npm 安装：
npm install --save wdt-jdatepicker
然后在您的代码中导入：
import WdtJDatePicker from 'wdt-jdatepicker';
或者从一个 CDN 引入：
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- -------------------------------------------------------------------------------------- --
-------
------
---- ----------------------
------- ----------------------------------------------------------------------------------------------
--------
--- ------------------------------
---------
-------
-------使用
在您的 HTML 中使用一个空 div，传递它的 ID 或类名称，然后在您的 JavaScript 文件中新建一个 WdtJDatePicker 实例。
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- ------------------------------------------------------------------ --
-------
------
---- ----------------------
------- --------------------------------------------------------------------------
--------
----- ---------- - --- ------------------------------
---------
-------
-------你可以在选项中的 languages 数组中添加你自己的语言。
-- -------------------- ---- -------
----- ---------- - --- ----------------
------- --------------
------- --------
---------- -
-
----- ----------
--------- ------ ----- ----- ----- ----- ----- ------
------- ------ ----- ----- ----- ----- ----- ----- ----- ----- ----- ------ -------
----------- ----- - -- - -- --
-
-
---你也可以在选项中传入 date 属性来设置默认日期。
const datePicker = new WdtJDatePicker({
target: '#datepicker',
locale: 'en-US',
date: new Date('2021-07-01')
});WdtJDatePicker 实例提供了一些方法：
getDate()返回当前选定日期。setDate(date)设置选定日期。
-- -------------------- ---- -------
----- ---------- - --- ----------------
------- --------------
------- --------
-------------- -
------------------
-
---
----------------------------------
---------------------- --------------------不同于其他的日期选择器，wdt-jdatepicker 可以自定义外观，只需要指定你应用的配色方案，在 CSS 文件中修改颜色即可。
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- ------------------------------------------------------------------ --
-------
------
---- ----------------------
------- --------------------------------------------------------------------------
--------
----- ---------- - --- ----------------------------- -
------------ -
---------- ----------
---------- -------
----------------- ----------
--
---
---------
-------
-------示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- ------------------------------------------------------------------ --
-------
------
---- ----------------------
------- --------------------------------------------------------------------------
--------
----- ---------- - --- ----------------------------- -
------------ -
---------- ----------
---------- -------
----------------- ----------
--
-------------- -
------------------
--
------- ----------
---------- -
-
----- ----------
--------- ------ ----- ----- ----- ----- ----- ------
------- ------ ----- ----- ----- ----- ----- ----- ----- ----- ----- ------ -------
----------- ----- - -- - -- --
-
--
----- --- ------------------
---
----------------------------------
---------------------- --------------------
---------
-------
-------总结
wdt-jdatepicker 是一个轻量级、易于使用并且支持自定义外观的日期选择器 JavaScript 组件。它集成了原生 HTML5 日期选择器，因此易于集成，并且支持从多个语言中选择本地化日期格式。它非常适合使用在 Web 应用程序开发中，能够提供良好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572da81e8991b448e90f6