allin-date-picker

简洁轻便好使的时间选择器。(2.0版本修复了部分bug，参数更灵活。)

依赖

依赖better-picker.js=>better-scroll.js,原生es6语法实现。

如何使用

通过npm引入

安装allin-date-picker

npm install allin-date-picker --save-dev

引入allin-date-picker

import PickerDate from 'pickerDate'

如果不支持import, 请使用

var PickerDate = require('pickerDate')

html 部分：

<div id="name">点我选择</div>

JS 部分：

var nameEl = document.getElementById('name');
//需要初始化选择器
var options = {
    startYear:1990,   // 开始时间(默认1980)
    lastYear:2020,    // 结束时间，不传默认为当前年份
    title: '',  // 选择器标题,默认空
    reset：true, // 是否超出当前日期回滚到当前日期(默认false)；
    defaultYear:1980,//默认选中的年份，不传则默认为当天
    defaultMonth:1,//默认选中的月份，不传则默认为当天
    defaultDay:1,//默认选中的天，不传则默认为当天
    changeFun:function (index,val) {
        //index（改变的是那一列；0-年；1-月；2-日）
        //val（改变那一列的索引值）
    },//当一列滚动停止的时候
    selectFun:function (index,val) {
       // index（选择的索引数组）
        //val（选择的值的数组）
    }，//当用户点击确定的时候，
    valueChangeFun: function (index,val){
        //index（选择的索引数组）
       // val（选择的值的数组）
    }，//当用户点击确定的时候，如果本次选择的数据和上一次不一致，
    cancelFun:function () {
      //当用户点击取消的时候触发
    }
}
var picker = new PickerDate(options);

nameEl.addEventListener('click', function () {
    pickerDate.show();
});

编程接口

show (next)

显示筛选器，next 为筛选器显示后执行的回调函数。

hide ()

隐藏筛选器，一般来说，筛选器内部已经实现了隐藏逻辑，不必主动调用。

resetPosition()

重置选择器恢复初始默认选项

如何构建

allin-date-picker的源码是基于webpack构建的

首先，clone项目源码

git clone https://github.com/aYangLi/allin-date-picker.git

安装依赖

cd allin-date-picker
npm install

测试demo页

npm run dev

打开浏览器访问如下地址, 查看效果

localhost:9090

线上 demo 访问，查看效果：

线上效果地址