超轻量无依赖的日期时间控件！
大家好，我是前端实验室的大师兄！
今天要和大家分享的是一个大师兄十分喜欢的日期选择器：Pikaday。
Pikaday不依赖于任何 Javascript 库，且文件大小小于 5K。不仅轻量，而且功能也十分强大。
还可以进行高级定制，样式可以根据 CSS 进行更改选择器的设计。
安装
可以将 Pikaday 作为 NPM 包安装：
npm install pikaday
或者直接链接到 CDN：
<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
注意:样式的处理还需要包含 PikadayCSS 文件
作为 NPM 包安装：
@import './node_modules/pikaday/css/pikaday.css';
或链接到 CDN：
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">
使用
Pikaday 可以绑定到输入字段：
<input type="text" id="datepicker">
对 Pikaday 进行初始化，将下面 JavaScript 添加到文档末尾：
<script src="pikaday.js"></script>
<script>
var picker = new Pikaday({ field: document.getElementById('datepicker') });
</script>
如果你用 jQuery 确保只传递第一个元素
var picker = new Pikaday({ field: $('#datepicker')[0] });
如果 Pikaday 实例没有绑定到某个字段，则可以在任何地方追加该元素：
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 构造函数。
<input type="text" id="datepicker" value="9 Oct 2014">
<script src="moment.js"></script>
<script src="pikaday.js"></script>
<script>
var picker = new Pikaday({
field: document.getElementById('datepicker'),
format: 'D MMM YYYY',
onSelect: function() {
console.log(this.getMoment().format('Do MMMM YYYY'));
}
});
</script>
对于更高级和更灵活的格式设置，您可以传递自己的格式。
通过 toString 函数格式化 Date 对象的配置。
toString(date, format = 'YYYY-MM-DD')
示例：
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更多的配置信息请访问后文的的官方地址进行查阅
方法
可以在创建后，通过方法控制日期选择器：获取和设置日期：
picker.getDate();
picker.setDate('2022-12-08');
还可以是Moment.js对象(必须在Pikaday之前加载)。
picker.getMoment()
picker.setMoment(moment('14th February 2014', 'DDo MMMM YYYY'))
清除和重置日期
picker.clear();
Pikaday更多的方法功能请访问后文的的官方地址进行查阅
其他
Pikaday 的功能远不止上面这些内容。使用的过程中，大家可以参考官方地址。
Github 地址： https://github.com/Pikaday/Pikaday
还有就是：使用前，要考虑好浏览器兼容性。
如上图所示，只要不是特别老的浏览器，一般没啥问题。