挪动端material作风日期时候选择器

2019年8月31日 167次阅读 来源: dolymood

很多时刻在挪动端须要一个的日期挑选器，因为在运用上有能够运用种种框架库（Vue.js, React.js, zepto.js等）；所以说一个无依靠的，如许易于上层举行封装。直接直言不讳，先来张动图看看结果：

《挪动端material作风日期时候选择器》

能够看出全部作风就是 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；或许手机扫描二维码即可检察：

《挪动端material作风日期时候选择器》

项目

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

迎接拍砖，试用。

    原文作者：dolymood
    原文地址: https://segmentfault.com/a/1190000007255151
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞