移动端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'
}
在线查看
如果你是用手机访问请直接点击 http://demo.aijc.net/js/date-time-picker/dist/example.html;或者手机扫描二维码即可查看:
项目
地址:https://github.com/dolymood/date-time-picker
欢迎拍砖,试用。
移动端material风格日期时间选择器的更多相关文章
- 移动端lCalendar纯原生js日期时间选择器
网上找过很多的移动端基于zepto或jquery的日期选择器,在实际产品中也用过一两种,觉得都不太尽如人意,后来果断选择了H5自己的日期input表单,觉得还可以,至少不用引用第三方插件了,性能也不错 ...
- Android日期时间选择器实现以及自定义大小
本文主要讲两个内容:1.如何将DatePicker和TimePicker放在一个dialog里面:2.改变他们的宽度: 问题1:其实现思路就是自定义一个Dialog,然后往里面同时放入DatePick ...
- 24款最好的jQuery日期时间选择器插件
如果你正在创建一个网络表单,有很多事情你需要在你的应用程序中使用.有时您需要特别的输入,从用户的日期和时间,如发票日期,生日,交货时间,或任何其他此类信息.如果你有这样的需要,可以极大地从动态的jQu ...
- Bootstrap-datepicker日期时间选择器的简单使用
日期时间选择器 目前,bootstrap有两种日历.datepicker和datetimepicker,后者是前者的拓展. Bootstrap日期和时间组件: 使用示例: 从左到右依次是十年视图.年视 ...
- flatpickr功能强大的日期时间选择器插件
flatpickr日期时间选择器支持移动手机,提供多种内置的主题效果,并且提供对中文的支持.它的特点还有: 使用SVG作为界面的图标. 兼容jQuery. 支持对各种日期格式的解析. 轻量级,高性能, ...
- 日期时间选择器插件flatpickr
前言:在网页上需要输入时间的时候,我们可以用HTML5的inputl中的date类型.但是如下入所示,有些浏览器不支持.flatpickr这个小插件可以解决这个问题. 1.flatpickr日期时间选 ...
- 解决elementui日期时间选择器提交时与后台date类型不匹配问题
问题描述: 在前端使用elementui的日期时间选择器后,在通过axios进行提交的时候,前端控制台出现了400(数据类型不匹配的错误)的错误. <el-form-item label=&qu ...
- Android中实现日期时间选择器(DatePicker和TimePicker)
利用Android应用框架提供的DatePicker(日期选择器)和TimePicker(时间选择器),实现日期时间选择器. Dialog的Content布局文件(date_time_dialog.x ...
- elementUI 日期时间选择器 只能选择当前及之后的时间
日期时间选择器 只能选择当前及之后的时间 <el-date-picker class="input-border-null" prefix-icon="el-ic ...
随机推荐
- asp.net C#生成和解析二维码代码
类库文件我们在文件最后面下载 [ThoughtWorks.QRCode.dll 就是类库] 使用时需要增加: using ThoughtWorks.QRCode.Codec;using Thought ...
- NAT
WRITE BY YANGWJ 一. 配置静态Nat 实验图如下: 1. 将网络基本条件配置好,包括路由要可达,即pc1可以ping到server1 2. ...
- 关于server的一些小记
一. 批量创建用户 1. Import-Module ActiveDirectory 2. import-csv e:\users\newusers.csv | 3. New-ADUser -path ...
- 在调用“Fill”前,SelectCommand 属性尚未初始化
在调用“Fill”前,SelectCommand 属性尚未初始化 是因为少写了一行代码: private readonly string strConnection = System.Configur ...
- ios 中的block应用
在这个大冬天里默默敲着键盘,勿喷.今天学习swift过程中,学习到闭包,发现闭包和oc的block中有很多的相同之处,又重新学习了一下并且学习了一些高级点的用法,内容如下: 1.block格式说明:( ...
- 利用ExcelDataReader封装类 导入表格数据
nuget 添加Install-Package ExcelDataReader
- 济南学习 Day 3 T2 pm
LYK 快跑!(run)Time Limit:5000ms Memory Limit:64MB题目描述LYK 陷进了一个迷宫! 这个迷宫是网格图形状的. LYK 一开始在(1,1)位置, 出口在(n, ...
- 《linux源代码包的编译安装》RHEL6
linux下源代码包的编译安装其实没那么复杂. 我是win7系统装的虚拟机,就简单说下: 举个简单的例子: http://www.openssl.org/ 这是openssl的官网,下载openssl ...
- Reveal 配置与使用
http://www.th7.cn/Program/IOS/201608/939231.shtml http://www.jianshu.com/p/abac941c2e8e 这个比较好.http:/ ...
- Windows 下 Composer 与 Laravel 4 的安装
1.安装Composer Composer是PHP的依附经管对象之一,官方网站 http://getcomposer.org/ .它支撑多种安装体式格式,对于在win下做开辟的草来说,最便捷的体式格式 ...