移動端material風格日期時間選擇器

philadelphia 發布于2019-08-22 10:41 / 3428人閱讀

摘要：好多時候在移動端需要一個的日期選擇器，由于在應用上有可能應用各種框架庫等所以說一個無依賴的，這樣易于上層進行封裝。主要包含兩種選擇器日期和時間。

好多時候在移動端需要一個的日期選擇器，由于在應用上有可能應用各種框架庫（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

歡迎拍磚，試用。

云服務器 GPU云服務器手機端js日期選擇 asp日期選擇器時間插件移動端移動端js時間插件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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 2019-08-22 10:47 評論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 2019-08-01 16:03 評論0 收藏0
javascript功能插件大集合，寫前端的親們記得收藏

摘要：一個專注于瀏覽器端和兼容的包管理器。一個整合和的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。完全插件化的工具，能在中識別和記錄模式。健壯的優雅且功能豐富的模板引擎。完整的經過充分測試和記錄數據結構的庫。【導讀】：GitHub 上有一個 Awesome – XXX 系列的資源整理。awesome-javascript 是 sorrycc 發起維護的 JS 資源列表...

cfanr 2019-08-20 10:34 評論0 收藏0