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, 请使用
var PickerDate =
html 部分:
<div id="name">点我选择</div>
JS 部分:
var nameEl = document;//需要初始化选择器var options = startYear:1990 // 开始时间(默认1980) lastYear:2020 // 结束时间,不传默认为当前年份 title: '' // 选择器标题,默认空 reset:true // 是否超出当前日期回滚到当前日期(默认false); defaultYear:1980//默认选中的年份,不传则默认为当天 defaultMonth:1//默认选中的月份,不传则默认为当天 defaultDay:1//默认选中的天,不传则默认为当天 { //index(改变的是那一列;0-年;1-月;2-日) //val(改变那一列的索引值) }//当一列滚动停止的时候 { // index(选择的索引数组) //val(选择的值的数组) },//当用户点击确定的时候, { //index(选择的索引数组) // val(选择的值的数组) },//当用户点击确定的时候,如果本次选择的数据和上一次不一致, { //当用户点击取消的时候触发 }var picker = options; nameEl;
编程接口
show (next)
显示筛选器,next 为筛选器显示后执行的回调函数。
hide ()
隐藏筛选器,一般来说,筛选器内部已经实现了隐藏逻辑,不必主动调用。
resetPosition()
重置选择器恢复初始默认选项
如何构建
allin-date-picker的源码是基于webpack构建的
首先,clone项目源码
git clone https://github.com/aYangLi/allin-date-picker.git
安装依赖
cd allin-date-pickernpm install
测试demo页
npm run dev
打开浏览器访问如下地址, 查看效果
localhost:9090
线上 demo 访问,查看效果: