好多时候在移动端需要一个的日期选择器，由于在应用上有可能应用各种框架库(vue.js, react.js, zepto.js等);所以说一个无依赖的，这样易于上层进行封装。直接开门见山，先来张动图看看效果：
可以看出整个风格就是 material design 风格的，主要特点就是：
手势操作：左划右划切换月份，当然动画效果还是要有的。
快速选择年月：点击年部分切换到选择年界面，点击月日周会__来回切换__到主日期选择界面和月份选择界面(如果在非日期选择主界面点击就会切换到主界面，如果在主界面点击就切换到快速选择月份界面);当然选择年一级选择月份界面要有顺滑的滑动效果。
钟表样式时间选择：直接、简单选择时间。
安装使用
利用webpack打包，支持umd，暴露全局datetimepicker变量，当然可以选择通过npm安装：npm i date-time-picker即可。主要包含两种选择器：日期和时间。
日期选择器 datepicker
btn.onclick = function () {
var datepicker = new datetimepicker.date(options, config)
datepicker.on('selected', function (formatdate, now) {
// formatdata = 2016-10-19
// now = date实例 -> wed oct 19 2016 20:28:12 gmt+0800 (cst)
})
}
时间选择器 timepicker
var timepicker = new datetimepicker.time(options, config)
timepicker.on('selected', function (formattime, now) {
// formattime = 18:30
// now = date实例 -> wed oct 19 2016 18:30:13 gmt+0800 (cst)
api以及事件
api:
picker.show()
picker.hide()
picker.destroy()
事件：
picker
// 点击确定
.on('selected', function (formatvalue, now) {
console.log(formatvalue, now)
// 点击取消，同时会触发 `destroy` 事件
.on('canceled', function () {
console.log('canceled')
// 销毁
.on('destroy', function () {
console.log('destroy')
})
options 和 config
从上边可以看到在实例化picker的时候有两个参数可选：options和config。
同样区分下datepicker和timepicker。
datepicker options
{
lang: 'en', // 语言，默认 'en' ，默认 'en', 'zh-cn' 可选
format: 'yyyy-mm-dd', // 格式， 'yyyy-mm-dd'
default: '2016-10-19', // 默认值 `new date()`。 如果`default`有值且是字符串的话就会根据`format`参数来将其转化为一个`date`实例。当然可以选择传入一个日期实例。
timepicker options
format: 'hh:mm', // 格式， 'hh:mm'
default: '12:27', // 默认值 `new date()`。 如果`default`有值且是字符串的话就会根据`format`参数来将其转化为一个`date`实例。同样可以选择传入一个日期实例。
minutestep: 5 // 分钟精度，默认值 5。
config
默认中文(zh-cn)配置：
day: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
shortday: ['日', '一', '二', '三', '四', '五', '六'],
mdw: 'm月d日d', // 主面板标题部分 月日星期
ym: 'yyyy年m月', // 日期部分标题显示
ok: '确定', // 确定按钮
cancel: '取消' // 取消按钮
默认英语配置(en)：
{
day: ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'],
shortday: ['s', 'm', 't', 'w', 't', 'f', 's'],
mdw: 'd, mm-d',
ym: 'yyyy-m',
ok: 'ok',
cancel: 'cancel'
作者：dolymood
来源：51cto