移动端material风格日期时间选择器

简介:

好多时候在移动端需要一个的日期选择器,由于在应用上有可能应用各种框架库(Vue.js, React.js, zepto.js等);所以说一个无依赖的,这样易于上层进行封装。直接开门见山,先来张动图看看效果:

可以看出整个风格就是 Material Design 风格的,主要特点就是:

  • 手势操作:左划右划切换月份,当然动画效果还是要有的。
  • 快速选择年月:点击年部分切换到选择年界面,点击月日周会__来回切换__到主日期选择界面和月份选择界面(如果在非日期选择主界面点击就会切换到主界面,如果在主界面点击就切换到快速选择月份界面);当然选择年一级选择月份界面要有顺滑的滑动效果。
  • 钟表样式时间选择:直接、简单选择时间。

安装使用

利用webpack打包,支持UMD,暴露全局DateTimePicker变量,当然可以选择通过npm安装:npm i date-time-picker即可。主要包含两种选择器:日期和时间。

日期选择器 DatePicker


  
  
  1. btn.onclick = function () { 
  2.   var datePicker = new DateTimePicker.Date(options, config) 
  3.   datePicker.on('selected'function (formatDate, now) { 
  4.     // formatData = 2016-10-19 
  5.     // now = Date实例 -> Wed Oct 19 2016 20:28:12 GMT+0800 (CST) 
  6.   }) 
  7.  

时间选择器 TimePicker


  
  
  1. btn.onclick = function () { 
  2.   var timePicker = new DateTimePicker.Time(options, config) 
  3.   timePicker.on('selected'function (formatTime, now) { 
  4.     // formatTime = 18:30 
  5.     // now = Date实例 -> Wed Oct 19 2016 18:30:13 GMT+0800 (CST) 
  6.   }) 
  7.  

API以及事件

API:


  
  
  1. picker.show() 
  2. picker.hide() 
  3. picker.destroy()  

事件:


  
  
  1. picker 
  2.   // 点击确定 
  3.   .on('selected'function (formatValue, now) { 
  4.     console.log(formatValue, now) 
  5.   }) 
  6.   // 点击取消,同时会触发 `destroy` 事件 
  7.   .on('canceled'function () { 
  8.     console.log('canceled'
  9.   }) 
  10.   // 销毁 
  11.   .on('destroy'function () { 
  12.     console.log('destroy'
  13.   })  

options 和 config

从上边可以看到在实例化Picker的时候有两个参数可选:options和config。

同样区分下DatePicker和TimePicker。

DatePicker Options


  
  
  1.   lang: 'EN', // 语言,默认 'EN' ,默认 'EN''zh-CN' 可选 
  2.   format: 'yyyy-MM-dd', // 格式, 'yyyy-MM-dd' 
  3.   default'2016-10-19', // 默认值 `new Date()`。 如果`default`有值且是字符串的话就会根据`format`参数来将其转化为一个`Date`实例。当然可以选择传入一个日期实例。 
  4.  

TimePicker Options


  
  
  1.   lang: 'EN', // 语言,默认 'EN' ,默认 'EN''zh-CN' 可选 
  2.   format: 'HH:mm', // 格式, 'HH:mm' 
  3.   default'12:27', // 默认值 `new Date()`。 如果`default`有值且是字符串的话就会根据`format`参数来将其转化为一个`Date`实例。同样可以选择传入一个日期实例。 
  4.   minuteStep: 5 // 分钟精度,默认值 5。 
  5.  

Config

默认中文(zh-CN)配置:


  
  
  1.   day: ['周日''周一''周二''周三''周四''周五''周六'], 
  2.   shortDay: ['日''一''二''三''四''五''六'], 
  3.   MDW: 'M月d日D', // 主面板标题部分 月日星期 
  4.   YM: 'yyyy年M月', // 日期部分标题显示 
  5.   OK: '确定', // 确定按钮 
  6.   CANCEL: '取消' // 取消按钮 
  7.  

默认英语配置(EN): 


  
  
  1. {  
  2. day: ['Sun''Mon''Tue''Wed''Thu''Fri''Sat'], 
  3.   shortDay: ['S''M''T''W''T''F''S'], 
  4.   MDW: 'D, MM-d'
  5.   YM: 'yyyy-M'
  6.   OK: 'OK'
  7.   CANCEL: 'CANCEL' 
  8.  




作者:dolymood
来源:51CTO
目录
相关文章
|
JSON 小程序 开发工具
uniapp获取接口数据,渲染在picker选择器里面
uniapp获取接口数据,渲染在picker选择器里面
151 0
|
3月前
|
存储 JavaScript 前端开发
Axure设计之日期时间范围选择器
在产品设计和原型制作中,日期时间范围选择器是常见需求。本文介绍如何使用Axure的动态面板、中继器、文本框、按钮及时间函数,快速制作一个功能完备的日期时间范围选择器。详细步骤包括创建基本框架、设置时间函数、载入时获取当前时间、添加时间选择功能、更新文本框值和验证格式化。通过这些步骤,你可以在Axure中轻松实现这一功能。
252 0
|
9月前
|
移动开发
【实用】一组原创原生样式的基础控件、UI组件样式(偏向移动端H5页面的样式)
【实用】一组原创原生样式的基础控件、UI组件样式(偏向移动端H5页面的样式)
【实用】一组原创原生样式的基础控件、UI组件样式(偏向移动端H5页面的样式)
|
7月前
|
JavaScript
文本,最简单的文本样式设计风格样式,让Element-UI盒子居中的写法
文本,最简单的文本样式设计风格样式,让Element-UI盒子居中的写法
|
9月前
|
移动开发 小程序 JavaScript
uniapp中uview组件库丰富的Slider 滑动选择器的使用方法
uniapp中uview组件库丰富的Slider 滑动选择器的使用方法
932 1
|
9月前
|
前端开发
element-ui组件DatePicker日期选择器移动端兼容
element-ui组件DatePicker日期选择器移动端兼容
element-ui组件DatePicker日期选择器移动端兼容
|
9月前
|
索引 API Unix
【鸿蒙软件开发】ArkTS基础组件之TextClock(时间显示文本)、TextPicker(滑动选择文本)
【鸿蒙软件开发】ArkTS基础组件之TextClock(时间显示文本)、TextPicker(滑动选择文本)
519 0
【鸿蒙软件开发】ArkTS基础组件之TextClock(时间显示文本)、TextPicker(滑动选择文本)
|
9月前
|
JavaScript 前端开发
jsjs原生 JavaScript轮播图 渐变淡入淡出
jsjs原生 JavaScript轮播图 渐变淡入淡出
|
9月前
|
前端开发
【零基础入门前端系列】—基础选择器和字体属性(十)
【零基础入门前端系列】—基础选择器和字体属性(十)
|
前端开发 JavaScript
JavaScript日历制作并实现拖动选择日期
JavaScript日历制作并实现拖动选择日期
98 0