时间选择器(年月日时分)datetime-picker

刚开始踏入小程序的坑，各种东西捣鼓起来磕磕碰碰好艰难，碰到问题也是请教了各种大神，本着分享、互相学习的精神，分享一个刚完成的时间选择器，模拟器中效果图如下：

需求环境： 
　　如办公应用等，外出申请、请假申请时，所要填写的请假开始时间、结束时间，同时需要年月日，小时分钟的表单

插件优势： 
　　相比于当前现有picker，仅单纯支持日期：年月日，或者时间：小时分钟，使得当想要填写【2017年1月20日 08:30】至【2017年1月20日 13:30】 时，官方picker需要定义开始日期、开始时间、结束日期、结束时间4个选择器，个人觉得用户体验欠缺，所以边学习边用picker-view组件，做了这个datetime-picker时间选择器。

开发版本： 
　　微信web开发工具v0.12.130400

测试环境： 
　　在开发工具v0.12.130400版本的模拟器中正常使用，由于没appid，暂未真机测试

参数说明：(传对象)

1. {
2.  
3. page:this,//必传，用于setData本页面
4.  
5. height:600,//可选，数值类型，选择器高度，单位rpx，默认600，
6.  
7. animation:'slide',//可选，字符类型，动画仅支持slide伸缩和fade淡入淡出，不传、传空、传其他字符串均为无动画
8.  
9. duration:500,//可选，数值类型，持续的毫秒数，不传则默认500,
10.  
11. delay:0//可选，数值类型，延迟执行动画的毫秒数，不传则默认为0，不延迟
12.  
13. }

使用方法：

（1）下载picker_datetime.js 与 picker_datetime.wxml文件到本地

（2）在需要用到该选择器的wxml文件中，在底部引入picker_datetime.wxml

1. <include src="../tools/wxml/picker_datetime.wxml"/>

同时，需要给要用到该选择器的view里，bindTap一个点击事件，用于触发选择器，如

1. <view bindtap="startTap" class="form">开始时间：{{startDate}}</view>

（3）在需要用到该选择器的页面对应的js文件中，顶部引入picker_datetime.js

1. var pickerFile = require('../tools/js/picker_datetime.js');

同时，在此Page页面的onLoad事件中，加入以下代码

1. this.datetimePicker = new pickerFile.pickerDatetime({
2.  
3. page:this,
4.  
5. animation:'slide',
6.  
7. duration:500
8.  
9. });

最后，在对应的tap事件中，设置一下选择器，如第二步的例子startTab，绑定的值为{{startDate}}，则

1. startTap : function(){
2.  
3. this.datetimePicker.setPicker('startDate');
4.  
5. }

（4）最后剩CSS样式，放入app.wxss 或者当前要用到页面的wxss中

1. .pick_datetime {
2.  
3. position: fixed;
4.  
5. left: 0;
6.  
7. bottom: 0;
8.  
9. width:100%;
10.  
11. overflow:hidden;
12.  
13. }
14.  
15. .pick_datetime_tool {
16.  
17. display:flex;
18.  
19. justify-content:space-between;
20.  
21. height:92rpx;
22.  
23. line-height:92rpx;
24.  
25. border-top:4rpx solid #eee;
26.  
27. border-bottom:4rpx solid #eee;
28.  
29. padding:0 20rpx;
30.  
31. }
32.  
33. .pick_datetime_ok {font-weight:bold;}
34.  
35. .pick_datetime_clear {color:#666;}
36.  
37. .pick_datetime picker-view {
38.  
39. font-size:34rpx;
40.  
41. }
42.  
43. .pick_datetime_column {
44.  
45. height:40px;
46.  
47. line-height:40px;
48.  
49. text-align:center;
50.  
51. }

由于没真机测试，不敢保证真机上是不是有BUG，随着小程序的更新，也不敢保证后续开发环境中，是不是会出现BUG，或者在后续的小程序中官方更新内嵌了更方便的选择器。  好了，分享完毕继续捣鼓