前言
在前端开发过程中，难免会遇到需要使用日期选择器的情况。malkuthe-pikaday 是一个轻量级的日期选择器 npm 包，提供了丰富的定制化配置，本文将介绍如何使用该插件，并提供实用的示例代码。
安装
通过 npm 安装 malkuthe-pikaday：
npm install malkuthe-pikaday --save
当然，你也可以在 GitHub 上获取源代码。
简单示例
HTML 代码
<input type="text" id="datepicker" />
JavaScript 代码
import Pikaday from 'malkuthe-pikaday';
new Pikaday({
field: document.getElementById('datepicker')
});上述代码会在 #datepicker 元素后挂载一个日期选择器。
高级用法
初始化时配置
Pikaday 提供了许多配置项来控制其行为和样式。
-- -------------------- ---- -------
----- ------ - --- ---------
------ --------------------------------------
------- -------------
--------------- --
-------- --- -------------------
-------- --- -------------------
------------------- -----
------ -------------
----- -
-------------- -------
---------- -------
------- -
-----
-----
-----
-----
-----
-----
-----
-----
-----
-----
------
-----
--
--------- -
----
----
----
----
----
----
---
--
-------------- -
----
----
----
----
----
----
---
-
-
---field
指定要绑定 Pikaday 日期选择器的输入域元素。
format
定义日期格式字符串（如：'YYYY-MM-DD'）。日期格式化使用 Moment.js 库。
numberOfMonths
指定要显示的月份数。
minDate & maxDate
限制可以选择的日期范围。
showMonthAfterYear
设置月份是否在年份之后显示。
theme
样式主题，默认为“default.css”。如果你要使用自定义主题，请参考文档。
i18n
国际化选项。
事件
您可以在 Pikaday 日期选择器上监听以下事件：
onSelect(date)
选中日期时触发的事件。
const picker = new Pikaday({
field: document.getElementById('datepicker'),
onSelect: function(date) {
console.log(date.toLocaleDateString());
}
});onOpen() & onClose()
选择器打开和关闭时触发的事件。
-- -------------------- ---- -------
----- ------ - --- ---------
------ --------------------------------------
------- ---------- -
---------------------
--
-------- ---------- -
---------------------
-
---方法
在 Pikaday 日期选择器上有以下方法：
setDate(dateString)
设置日期，参数为日期字符串。
picker.setDate('2020-12-01');getSelectedDate()
获取当前选中日期。
const date = picker.getSelectedDate(); console.log(date.toLocaleDateString());
toString()
获取当前选中日期的字符串表示。
console.log(picker.toString());
结尾
此处我们详细介绍了如何使用 malkuthe-pikaday npm 包来创建一个简单的日期选择器。同时，我们也提供了更高级的用法的代码示例来说明如何配置和操作 Pikaday 实例。
回想如何使用事实增强的学习，您可以通过不断尝试和迭代，轻松使用 Pikaday 生成您需要的定制日期选择器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055bbc81e8991b448d954e