作者:殷小苗_535 | 来源:互联网 | 2023-08-21 11:55
很多时刻在挪动端须要一个的日期挑选器,因为在运用上有能够运用种种框架库(Vue.js,React.js,zepto.js等);所以说一个无依靠的,如许易于上层举行封装。直接直言不讳
很多时刻在挪动端须要一个的日期挑选器,因为在运用上有能够运用种种框架库(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
btn.Onclick= function () {
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
{
lang: 'EN', // 言语,默许 'EN' ,默许 'EN', 'zh-CN' 可选
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'
}
在线检察
假如你是用手机接见请直接点击 http://demo.aijc.net/js/date-time-picker/dist/example.html;或许手机扫描二维码即可检察:
项目
地点:https://github.com/dolymood/date-time-picker
迎接拍砖,试用。