simple-date-picker's Introduction

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

simple-date-picker's People

Contributors

Stargazers

Watchers

simple-date-picker's Issues

可以限制选择日期范围吗？

比如不能选择今天以后的日期

发现BUG

当月份选择到12月临界值的时候，按月份左右按钮，会出现BUG

当选择12月的时候，返回结果显示有问题

比如选择2016-12-8，显示成2017-0-8

发现一个问题,在一个页面中无法定义多个日期筛选器

       var _m_tmBuyDate = document.getElementById('m_tmBuy');

        var m_tmBuyDate = new DatePicker({
            confirmCbk: function(data) {
                _m_tmBuyDate.value = data.year + '-' + data.month + '-' + data.day;
                alert(_m_tmBuyDate.id+_m_tmBuyDate.value);
            }
        });

        _m_tmBuyDate.onfocus = function(e) {
            _m_tmBuyDate.blur();
            m_tmBuyDate.open();
        };
        var _m_tmSaleDate = document.getElementById('m_tmSale');

        var m_tmSaleDate = new DatePicker({
            confirmCbk: function(data) {
                _m_tmSaleDate.value = data.year + '-' + data.month + '-' + data.day;
                alert('123232'+_m_tmSaleDate.id+_m_tmSaleDate.value);
            }
        });

        _m_tmSaleDate.onfocus = function(e) {
            _m_tmSaleDate.blur();
            m_tmSaleDate.open();
        };

后一个的配置会覆盖前一个的配置，导致前一个的任何操作都会更改后一个 input 框的值

Recommend Projects