大家好，我是前端实验室的大师兄！
今天要和大家分享的是一个大师兄十分喜欢的日期选择器：Pikaday。
Pikaday不依赖于任何 Javascript 库，且文件大小小于 5K。不仅轻量，而且功能也十分强大。
还可以进行高级定制，样式可以根据 CSS 进行更改选择器的设计。
安装可以将 Pikaday 作为 NPM 包安装：
代码语言：javascript代码运行次数：0运行复制npm install pikaday
或者直接链接到 CDN：
代码语言：javascript代码运行次数：0运行复制
注意:样式的处理还需要包含 PikadayCSS 文件
作为 NPM 包安装：
代码语言：javascript代码运行次数：0运行复制@import './node_modules/pikaday/css/pikaday.css';
或链接到 CDN：
代码语言：javascript代码运行次数：0运行复制
使用Pikaday 可以绑定到输入字段：
代码语言：javascript代码运行次数：0运行复制
对 Pikaday 进行初始化，将下面 JavaScript 添加到文档末尾：
代码语言：javascript代码运行次数：0运行复制
如果你用 jQuery 确保只传递第一个元素
代码语言：javascript代码运行次数：0运行复制var picker = new Pikaday({ field: $('#datepicker')[0] });
如果 Pikaday 实例没有绑定到某个字段，则可以在任何地方追加该元素：
代码语言：javascript代码运行次数：0运行复制var field = document.getElementById('datepicker');
var picker = new Pikaday({ onSelect: function(date) { field.value = picker.toString(); }});
field.parentNode.insertBefore(picker.el, field.nextSibling);
格式化默认情况下，使用标准的 JavaScriptDate 对象对日期进行格式化和解析。如果 Moment.js 在作用域上可用，它将用于格式化和解析输入值。你可以传递一个附加的 format 选项传递给将传递给moment 构造函数。
代码语言：javascript代码运行次数：0运行复制
对于更高级和更灵活的格式设置，您可以传递自己的格式。
通过 toString 函数格式化 Date 对象的配置。
代码语言：javascript代码运行次数：0运行复制toString(date, format = 'YYYY-MM-DD')
示例：
代码语言：javascript代码运行次数：0运行复制parse(dateString, format = 'YYYY-MM-DD')
var picker = new Pikaday({
field: document.getElementById('datepicker'),
format: 'D/M/YYYY',
toString(date, format) {
// you should do formatting based on the passed format, // but we will just return 'D/M/YYYY' for simplicity
const day = date.getDate();
const month = date.getMonth() + 1;
const year = date.getFullYear();
return `${day}/${month}/${year}`;
},
parse(dateString, format) {
// dateString is the result of `toString` method const parts = dateString.split('/');
const day = parseInt(parts[0], 10);
const month = parseInt(parts[1], 10) - 1;
const year = parseInt(parts[2], 10);
return new Date(year, month, day);
}
});
注意两点：
1.toString函数返回一个字符串。
2.如果返回的格式化字符串不能由 Date.parse 方法(或通过moment)处理，那么必须提供自定义的parse函数。
Pikaday更多的配置信息请访问后文的的官方地址进行查阅
方法可以在创建后，通过方法控制日期选择器：获取和设置日期：
代码语言：javascript代码运行次数：0运行复制picker.getDate();
picker.setDate('2022-12-08');
还可以是Moment.js对象(必须在Pikaday之前加载)。
代码语言：javascript代码运行次数：0运行复制picker.getMoment()
picker.setMoment(moment('14th February 2014', 'DDo MMMM YYYY'))
清除和重置日期
代码语言：javascript代码运行次数：0运行复制picker.clear();
Pikaday更多的方法功能请访问后文的的官方地址进行查阅
其他Pikaday 的功能远不止上面这些内容。使用的过程中，大家可以参考官方地址。
Github 地址：
https://github.com/Pikaday/Pikaday
还有就是：使用前，要考虑好浏览器兼容性。
如上图所示，只要不是特别老的浏览器，一般没啥问题。