Pikaday 是一个 JavaScript 日期选择器，它不依赖于任何 Javascript 库，并且文件大小小于 5K，但是功能却一点不弱，可以进行高级定制。并且样式可以根据 CSS 进行更改选择器的设计，当然默认的样式已经非常不错了。
令人耳目一新的 JavaScript 数据时间选择器
安装
您可以将 Pikaday 作为 NPM 包安装：
npm install pikaday
或者直接链接到 CDN：
样式
您还需要包含 PikadayCSS 文件。这一步取决于 Pikaday 是如何安装的。要么作为 NPM 包安装：
@import './node_modules/pikaday/css/pikaday.css';
或链接到 CDN：
使用
Pikaday 可以绑定到输入字段：
将 JavaScript 添加到文档末尾：
如果你用 jQuery 确保只传递第一个元素：
var picker = new Pikaday({ field: $('#datepicker')
});
如果 Pikaday 实例没有绑定到某个字段，则可以在任何地方追加该元素：
var field = document.getElementById('datepicker');var picker = new Pikaday({ onSelect: function(date) {field.value = picker.toString(); }});field.parentNode.insertBefore(picker.el, field.nextSibling);
格式化
默认情况下whatsapp官网，使用标准的 JavaScriptDate 对象对日期进行格式化和解析。如果 在作用域上可用，它将用于格式化和解析输入值。你可以传递一个附加的 format 选项传递给将传递给moment 构造函数见 一个完整的版本。
对于更高级和更灵活的格式设置，您可以传递自己的格式。toString 函数设置为用于格式化 Date 对象的配置。此函数具有以下签名：
toString(date, format = 'YYYY-MM-DD')
您应该从它返回一个字符串。
不过小心点。如果您返回的格式化字符串不能由 Date.parse 方法(或通过moment如果它是可用的)，那么您必须提供您自己的parse函数在配置中。此函数将传递格式化字符串和格式：
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 simplicityconst 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` methodconst parts = dateString.split('/');const day = parseInt(parts
, 10);const month = parseInt(parts
, 10) - 1;const year = parseInt(parts
, 10);return new Date(year, month, day); }});
配置
如上面的例子所示，Pikaday 有许多有用的选择：
显示位置
如果 reposition 配置选项已启用(默认)，Pikaday 将根据其定位方式将 CSS-类应用于日期选择器：
注意，DOM 元素在任何时候通常都有2个CSS类(例如。top-aligned right-aligned等等)
jQuery 插件
Pikaday的正常版本不需要jQuery，但是如果jQuery插件在您的船上浮动，则需要jQuery插件(请参阅plugins/pikaday.jquery.js在存储库中)。这个版本自然需要jQuery，并且可以像其他插件一样使用。一个完整的版本。
AMD支架
如果使用模块化脚本加载器，Pikaday不会绑定到全局对象，并且将很好地适应您的构建过程。你可以像其他模块一样要求Pikaday。见一个完整的版本。
require(
'pikaday'
, function(Pikaday) { var picker = new Pikaday({ field: document.getElementById('datepicker') });});
上述jQuery插件也是如此。见一个完整的版本。
require(
'jquery', 'pikaday.jquery'
, function($) { $('#datepicker').pikaday();});
CommonJS模块支持
如果使用CommonJS兼容的环境，则可以使用Required函数导入Pikaday。
var pikaday = require('pikaday');
当您将所需的所有模块绑定到你也不用指定忽略选项：
browserify main.js -o bundle.js -i moment
Ruby on Rails
如果你用Ruby on Rails，确保检查.
方法
您可以在创建后控制日期选择器：
var picker = new Pikaday({ field: document.getElementById('datepicker') });
获取和设定日期
picker.toString('YYYY-MM-DD')
以字符串格式返回选定日期。如果存在(推荐)然后Pikaday可以返回任何形式的瞬间理解。你也可以提供你自己的toString函数并自己进行格式化。阅读更多内容部分。
如果两者都没有moment对象是否存在？toString函数whatsapp登录，JavaScript的默认值为方法将被使用。
picker.getDate()
返回基本JavaScriptDate对象whatsapp网页版，或null如果没有选择。
picker.setDate('2015-01-01')
设置当前选择。这将被限制在minDate和maxDate如果指定了选项。您可以选择传递一个布尔值作为第二个参数，以防止触发onSelect回调(True)，从而允许以静默方式设置日期。
picker.getMoment()
返回对象(必须在Pikaday之前加载瞬间)。
picker.setMoment(moment('14th February 2014', 'DDo MMMM YYYY'))
设置当前选择的对象(请参见setDate详细情况)。
清除和重置日期
picker.clear()
将清除并重置选择器绑定到的输入。
改变当前视图
picker.gotoDate(new Date(2014, 1))
更改当前视图以查看特定日期。这个例子将跳到2014年2月().
picker.gotoToday()
快捷键picker.gotoDate(new Date())
picker.gotoMonth(2)
按月份更改当前视图(0：1月，1：2月等)。
picker.nextMonth() picker.prevMonth()
转到下一个月或前一个月(如有必要，这将改变年份)。
picker.gotoYear()
更改查看的年份。
picker.setMinDate()
更新可以选择的最小/最早日期。
picker.setMaxDate()
更新可以选择的最大/最新日期。
picker.setStartRange()
更新范围开始日期。用于使用两个Pikaday实例来选择日期范围。
picker.setEndRange()
更新范围结束日期。用于使用两个Pikaday实例来选择日期范围。
显示和隐藏日期选择器
picker.isVisible()
回报true或false.
picker.show()
让采摘器可见。
picker.adjustPosition()
重新计算并更改选择器的位置。
picker.hide()
把采摘器藏起来让它隐形。
picker.destroy()
隐藏选择和删除所有事件侦听器-不回去！
默认i18n配置格式如下所示：
i18n: { previousMonth : 'Previous Month', nextMonth: 'Next Month', months:
'January','February','March','April','May','June','July','August','September','October','November','December'
, weekdays:
'Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'
, weekdaysShort :
'Sun','Mon','Tue','Wed','Thu','Fri','Sat'
你必须提供12个月和7个工作日(缩写)。一定要按照这个顺序指定周日的日期。您可以更改firstDay如有需要，可重新订购(0：星期日，1：星期一等)。你也可以设置isRTL到true用于从右到左阅读的语言。
浏览器兼容性