资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/移动端material风格日期时间选择器

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

philadelphia / 3546人阅读

摘要：好多时候在移动端需要一个的日期选择器，由于在应用上有可能应用各种框架库等所以说一个无依赖的，这样易于上层进行封装。主要包含两种选择器日期和时间。

好多时候在移动端需要一个的日期选择器，由于在应用上有可能应用各种框架库（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. {
  2.   lang: "EN", // 语言，默认 "EN" ，默认 "EN", "zh-CN" 可选
  3.   format: "yyyy-MM-dd", // 格式， "yyyy-MM-dd"
  4.   default: "2016-10-19", // 默认值 `new Date()`。 如果`default`有值且是字符串的话就会根据`format`参数来将其转化为一个`Date`实例。当然可以选择传入一个日期实例。
  5. }
TimePicker Options 
</>复制代码 
  1. {
  2.   lang: "EN", // 语言，默认 "EN" ，默认 "EN", "zh-CN" 可选
  3.   format: "HH:mm", // 格式， "HH:mm"
  4.   default: "12:27", // 默认值 `new Date()`。 如果`default`有值且是字符串的话就会根据`format`参数来将其转化为一个`Date`实例。同样可以选择传入一个日期实例。
  5.   minuteStep: 5 // 分钟精度，默认值 5。
  6. }
Config

默认中文（zh-CN）配置：

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

默认英语配置（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. }
在线查看

如果你是用手机访问请直接点击 http://demo.aijc.net/js/date-time-picker/dist/example.html；或者手机扫描二维码即可查看：

项目

地址：https://github.com/dolymood/date-time-picker

欢迎拍砖，试用。

GPU云服务器 云服务器 手机端js日期选择 asp日期选择器 时间插件移动端 移动端js时间插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91067.html

相关文章

  • UI大全：前端UI框架集合（持续更新，当前32个）

    摘要：简洁直观强悍的前端开发框架，让开发更迅速简单。是一套基于的前端框架。首个版本发布于年金秋，她区别于那些基于底层的框架，却并非逆道而行，而是信奉返璞归真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...

    only_do 评论0 收藏0

  • UI大全：前端UI框架集合（持续更新，当前32个）

    摘要：简洁直观强悍的前端开发框架，让开发更迅速简单。是一套基于的前端框架。首个版本发布于年金秋，她区别于那些基于底层的框架，却并非逆道而行，而是信奉返璞归真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...

    church 评论0 收藏0

  • javascript功能插件大集合，写前端的亲们记得收藏

    摘要：一个专注于浏览器端和兼容的包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。完全插件化的工具，能在中识别和记录模式。健壮的优雅且功能丰富的模板引擎。完整的经过充分测试和记录数据结构的库。 【导读】：GitHub 上有一个 Awesome – XXX 系列的资源整理。awesome-javascript 是 sorrycc 发起维护的 JS 资源列表...

    cfanr 评论0 收藏0

发表评论

登陆后可评论

0条评论

philadelphia

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<