1. 程式人生 > >Web APP 日期選擇控件

Web APP 日期選擇控件

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.cssdatepicker.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: openclose,其中特別註意上面demo中_date在獲取焦點之後裏面強制去除了焦點,是為了避免安卓下面為input標簽設置readonly屬性並不能禁止原生鍵盤彈出的問題。

在線demo

技術分享圖片

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

Web APP 日期選擇控件