移动端material风格日期时间选择器
好多时候在移动端需要一个的日期选择器,由于在应用上有可能应用各种框架库(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'
- }
移动端material风格日期时间选择器相关推荐
- 微信小程序----日期时间选择器(自定义精确到分秒或时段)
声明 bug:由于此篇博客是在bindcolumnchange事件中做的值的改变处理,因此会出现当你选择时,没有点击确定,直接取消返回后,会发现选择框的值依然改变. 造成原因:这一点就是由于在bind ...
- Element UI——日期时间选择器el-date-picker开始时间与结束时间约束解决方案
官方文档 https://element.eleme.cn/#/zh-CN/component/datetime-picker 问题分析 el-date-picker组件需要 :picker-opti ...
- Android中实现日期时间选择器(DatePicker和TimePicker)
利用Android应用框架提供的DatePicker(日期选择器)和TimePicker(时间选择器),实现日期时间选择器. Dialog的Content布局文件(date_time_dialog.x ...
- DateTimePicker 日期时间选择器报错 Cannot read property ‘getHours‘ of undefined, 无法选中`[__ob_: observer__]`时做判断
我在一次开发中遇到了这个情况:使用DateTimePicker 日期时间选择器,出现无法选中, 报错 Cannot read property 'getHours' of undefined, 这个原 ...
- php中日期选择代码,实现JS日期时间选择器
这次给大家带来实现JS日期时间选择器,实现JS日期时间选择器的注意事项有哪些,下面就是实战案例,一起来看一下. flatpickr 是一个轻量级.注重精益.由 UX 驱动和可扩展的 JavaScrip ...
- flatpickr功能强大的日期时间选择器插件
flatpickr日期时间选择器支持移动手机,提供多种内置的主题效果,并且提供对中文的支持.它的特点还有: 使用SVG作为界面的图标. 兼容jQuery. 支持对各种日期格式的解析. 轻量级,高性能, ...
- bootstrap,datetimepicker日期时间选择器-限制时间段,以及中文显示问题
基于bootstrap的css,js bootstrap-datetimepicker的css,js <script src="jquery-1.11.1.min.js"&g ...
- 日期时间选择器 DateTimePicker 1127
日期时间选择器 DateTimePicker 控件引入 效果 属性
- datetimepicker 默认时间_Django项目中如何使用日期时间选择器DateTimePicker
如果你的模型中含有datetime类型的字段,表单中需要用户输入日期和时间,那么你如何保证不同用户输入的时间都遵循一定的格式(DD/MM/YYYY 或者YYYY-MM-DD)是个必须要考虑的问题.一个 ...
最新文章
- 全网首发 | 第一个opencv_contrib扩展模块中文教程限时领取
- 数据科学家最常用的十种算法
- 类加载机制-双亲委派,破坏双亲委派--这一篇全了解
- 计算机说课如何做课件ppt,《我的新工具——计算机》说课课件.ppt
- 10.18.1 linux文本编辑器vim
- runloop - 介绍
- 利用ptrace和memfd_create混淆程序名和参数
- 【Qt】绘制CIE色度图
- 适用于上门预约的门店小程序源码及管理系统,包含小程序源码!
- 主析取范式与主合取范式
- Jmeter-使用http proxy代理录制脚本
- 全息过山车:带你释放压力,体验激情
- PowerBuilder fileOpen()
- Java工作小组名称_小组名称和口号
- 大学计算机基础教程实验答案,大学计算机基础试验教程习题参考答案
- 2.4 放大电路静态工作点的稳定
- python你好怎么写_python学习之python入门
- 成都天瑞地安:学java开发的一些重要知识
- 2D流体火焰,低精度测试。
- 基于第三方平台进行直播的搭建(附源码数据库)