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

2022-04-22 19:44:28 字數 1296 閱讀 7750

原文

好多時候在移動端需要乙個的日期選擇器,由於在應用上有可能應用各種框架庫(vue.js,react.js,zepto.js等);所以說乙個無依賴的,這樣易於上層進行封裝。直接開門見山,先來張**看看效果:

可以看出整個風格就是 material design 風格的,主要特點就是:

利用webpack打包,支援umd,暴露全域性datetimepicker變數,當然可以選擇通過npm安裝:npm i date-time-picker即可。主要包含兩種選擇器:日期和時間。

日期選擇器datepicker

btn.onclick = function () )

}

時間選擇器timepicker
btn.onclick = function () )

}

api以及事件

api:

picker.show()

picker.hide()

picker.destroy()

事件:

picker

// 點選確定

.on('selected', function (formatvalue, now) )

// 點選取消,同時會觸發 `destroy` 事件

.on('canceled', function () )

// 銷毀

.on('destroy', function () )

從上邊可以看到在例項化picker的時候有兩個引數可選:optionsconfig

同樣區分下datepickertimepicker

datepicker options

timepicker options
config

預設中文(zh-cn)配置:

預設英語配置(en):

歡迎拍磚,試用。

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

好多時候在移動端需要乙個的日期選擇器,由於在應用上有可能應用各種框架庫 vue.js,react.js,zepto.js等 所以說乙個無依賴的,這樣易於上層進行封裝。直接開門見山,先來張 看看效果 可以看出整個風格就是 material design 風格的,主要特點就是 利用webpack打包,支...

移動端日期外掛程式

最近碼 時,遇到移動端日期外掛程式的呼叫,試了好幾種方法,最後選擇mobiscroll期外掛程式,實現在移動端滾動選擇日期 1 使用前,首先需要引入css和js檔案,我使用的是 mobiscroll.custom 2.6.2.min.css mobiscroll.custom 2.6.2.min.j...

移動遊戲風格

移動遊戲市場在最初階段一直被那些設計簡單 適合家庭生活的休閒小遊戲所統治,在當時的情況下,那些具有複雜圖形和故事情節的動作和冒險類大型遊戲則被業界看作是更適合遊戲機和個人電腦的遊戲。相比較而言,時過境遷,遊戲開發者們卻越來越多地把pc風格的遊戲引入到智慧型手機之中,以此吸引喜歡大型遊戲的使用者在行走...