Web APP 日期選擇控制項

標籤：輕量   屬性   class   data-   segment   install   參考   put   value   

github地址： https://github.com/yuanzm/simple-date-picker#simple-date-pickersimple-date-picker

基於zepto的移動端輕量級日期外掛程式

安裝

支援下面兩種方式

• git clone之後直接拷貝引用bin檔案夾下面的datepicker.min.css和datepicker.min.js
• 從npm下載安裝：npm install --save date_picker

使用

• 引用樣式datepicker.min.css
• 引用datepicker.min.js或者引用模組var DatePicker = require(‘date_picker‘);
• 執行個體化組件，綁定外掛程式日期選擇完成之後的回呼函數

var _date = document.getElementById(‘date‘);var datePicker = new DatePicker({confirmCbk: function(data) {            _date.value = data.year + ‘-‘ + data.month + ‘-‘ + data.day;}});    _date.onfocus = function(e) {    _date.blur();datePicker.open();    };

外掛程式外置兩個API： open和close,其中特別注意上面demo中_date在擷取焦點之后里面強制去除了焦點，是為了避免安卓下面為input標籤設定readonly屬性並不能禁止原生鍵盤彈出的問題。

線上demo

 

參考：https://www.cnblogs.com/yuanzm/p/5241323.html

Web APP 日期選擇控制項