码迷,mamicode.com
首页 > 移动开发 > 详细

Web APP 日期选择控件

时间:2018-09-05 18:08:03      阅读:478      评论:0      收藏:0      [点我收藏+]

标签:轻量   属性   class   data-   segment   install   参考   put   value   

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 日期选择控件

标签:轻量   属性   class   data-   segment   install   参考   put   value   

原文地址:https://www.cnblogs.com/fireicesion/p/9592129.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!