Web APP 日期選擇控件
阿新 • • 發佈:2018-09-05
input min ner 樣式 inpu 使用 參考 nor src
github地址: https://github.com/yuanzm/simple-date-picker#simple-date-picker
simple-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 日期選擇控件