微信小程序自定义时间段picker选择器

本文实例为大家分享了微信小程序自定义时间段picker选择器的具体代码，供大家参考，具体内容如下
想实现一个可以选择年份和时间段的日期选择器，如下所示

微信小程序自带的picker组件虽然能实现如上的内容，但不能实现样式的修改，不太符合小程序的设计主题，所以考虑了以下两种方法来实现如上的设计。
1.自定义date-picker
把要实现的date-picker封装为一个组件，组件内套用小程序自带的picker-view组件，其中picker_view-column表示不同的选择列，这样可以方便地实现样式的自定义。
实现效果：

具体实现
wxml文件：

1. <view class="mask" wx:if="{{isShow}}" catchtap="cancel">
2. <view class="content" style="height:800rpx" animation="{{animation}}">
3.   <view class="top">
4.    <view class="top-text top-left-color" hover-class="top-left-color-hover" catchtap="cancel">取消</view>
5.    <view class="top-text top-right-color" hover-class="top-right-color-hover" catchtap="confirm">确定</view>
6.   </view>
7.   <picker-view style="width: 100%; height: 80%;" value="{{value}}" bindchange="change" catchtap="no">
8.    <picker-view-column>
9.     <view wx:for="{{date_list}}" wx:key="date_list" class="item">{{item}}</view>
10.    </picker-view-column>
11.    <picker-view-column>
12.     <view wx:for="{{time_list}}" wx:key="time_list" class="item">{{item}}</view>
13.    </picker-view-column>
14.   lt;/picker-view>
15. </view>
16. </view>

复制代码

wxss文件：

1. .mask {
2. position: fixed;
3. width: 100%;
4. height: 100%;
5. left: 0;
6. right: 0;
7. top: 0;
8. bottom: 0;
9. display: flex;
10. background-color: rgba(0, 0, 0, 0.7);
11. z-index: 9999;
12. flex-direction: column;
13. justify-content: flex-end;
14. }
16. .content {
17. display: flex;
18. flex-direction: column;
19. width: 100%;
20. background: white;
21. border-top-right-radius: 20rpx;
22. border-top-left-radius: 20rpx;
23. }
25. .top {
26. display: flex;
27. flex-direction: row;
28. justify-content: space-between;
29. align-items: center;
30. height: 100rpx;
31. border-bottom: 1rpx solid #d3cfcf;
32. }
34. .top-text {
35. font-size: 30rpx;
36. width: 150rpx;
37. height: 100rpx;
38. display: flex;
39. flex-direction: row;
40. justify-content: center;
41. align-items: center;
42. }
44. .top-left-color {
45. color: #878787;
46. }
48. .top-left-color-hover {
49. color: #f1eaea;
50. }
52. .top-right-color {
53. color: #1296DB;
54. }
56. .top-right-color-hover {
57. color: #82ccf3;
58. }
60. .item {
61. width: 100%;
62. align-items: center;
63. justify-content: center;
64. display: flex;
65. flex-direction: row;
66. font-size: 18px;
67. }

复制代码

1. Component({
2.   /**
3.   * 组件的属性列表
4.   */
5.   properties: {
6.     range: { //可预约的日期范围。默认日期从今天开始，到第range天后为止，这里设为10天
7.       type: Number,
8.       value: 10
9.     },
10.     start_time: { //开始时间，设为整点
11.       type: Number,
12.       value: 8
13.     },
14.     step: { //预约时间的步长，设置为30，表示30分钟
15.       type: Number
16.     },
17.     end_time: { //结束时间，设为整点
18.       type: Number,
19.       value: 22
20.     }
21.   },
23.   /**
24.   * 组件的初始数据
25.   */
26.   data: {
27.     isShow: false,
28.     selectDate: "",
29.     dialogh: 0,
31.     //日期列表和时间列表
32.     date_list: [],
33.     time_list: []
34.   },
35.   attached: function () {
36.     let start_day = this.ts_string(new Date().getTime());
37.     console.log(start_day); //2021-08-31
38.     console.log(new Date());
39.     let end_day = this.ts_string(new Date().setDate(new Date().getDate() + this.properties.range))
40.     //获取日期列表
41.     let date_list = this.getDiffDate(start_day, end_day);
42.     //获取时间列表
43.     let time_list = this.getTimeList(this.properties.start_time, this.properties.end_time, this.properties.step);
44.     console.log(time_list);
45.     this.setData({
46.       // date_time: [date_column, time_column],
47.       date_list: date_list,
48.       time_list: time_list,
49.     })
50.     //动画
51.     this.animation = wx.createAnimation({
52.       duration: 300
53.     })
54.     //500rpx转成px
55.     let dialoghpx = 800 / 750 * wx.getSystemInfoSync().windowWidth
56.     this.setData({
57.       dialogh: dialoghpx,
58.       selectDate: this.data.date_list[0] + this.data.time_list[0]
59.     })
60.   },
61.   methods: {
62.     getDiffDate(start, end) {
63.       let startTime = new Date(start);
64.       let endTime = new Date(end);
65.       let dateArr = [];
66.       while ((endTime.getTime() - startTime.getTime()) >= 0) {
67.         dateArr.push(this.ts_string(startTime.getTime()));
68.         startTime.setDate(startTime.getDate() + 1);
69.       }
70.       return dateArr;
71.     },
72.     zfill(num, length) {
73.       return (Array(length).join('0') + num).slice(-length);
74.     },
75.     //把日期转换成xxxx-xx-xx的形式
76.     ts_string(timestamp) {
77.       let d = new Date(timestamp);
78.       let day = "";
79.       switch (d.getDay()) {
80.         case 1:
81.           day = "周一";
82.           break;
83.         case 2:
84.           day = "周二";
85.           break;
86.         case 3:
87.           day = "周三";
88.           break;
89.         case 4:
90.           day = "周四";
91.           break;
92.         case 5:
93.           day = "周五";
94.           break;
95.         case 6:
96.           day = "周六";
97.           break;
98.         case 0:
99.           day = "周日";
100.           break;
101.       }
102.       let string = (d.getFullYear()) + "-" +
103.         this.zfill((d.getMonth() + 1), 2) + "-" +
104.         this.zfill((d.getDate()), 2) + " (" + day + ")"
105.       return string
106.     },
107.     //获取时间区间列表，输入(起始时间，结束时间，步长)
108.     getTimeList(start, end, step) {
109.       let start_time = new Date();
110.       //设置起始时间
111.       start_time.setHours(start, 0, 0);
112.       console.log(start_time);
113.       //设置结束时间
114.       let end_time = new Date();
115.       end_time.setHours(end, 0, 0);
116.       let startG = start_time.getTime(); //起始时间的格林时间
117.       let endG = end_time.getTime(); //起始时间的格林时间
118.       let step_ms = step * 60 * 1000;
119.       let timeArr = [];
120.       while (startG < endG) {
121.         let time = this.timeAdd(startG, step_ms);
122.         timeArr.push(time);
123.         startG += step_ms;
124.       }
126.       return timeArr;
127.     },
128.     timeAdd(time1, add) {
129.       var nd = new Date(time1); //创建时间对象
130.       //获取起始时间的时分秒
131.       var hh1 = nd.getHours();
132.       var mm1 = nd.getMinutes();
133.       if (hh1 <= 9) hh1 = "0" + hh1;
134.       if (mm1 <= 9) mm1 = "0" + mm1;
135.       nd = nd.valueOf(); //转换为毫秒数
136.       nd = nd + Number(add);
137.       nd = new Date(nd);
138.       var hh2 = nd.getHours();
139.       var mm2 = nd.getMinutes();
140.       if (hh2 <= 9) hh2 = "0" + hh2;
141.       if (mm2 <= 9) mm2 = "0" + mm2;
142.       var time = hh1 + ":" + mm1 + "-" + hh2 + ":" + mm2;
143.       return time; //时间段
144.     },
145.     change: function (e) {
146.       const val = e.detail.value;
147.       //val[0]表示选择的第一列序号，val[1]表示选择的第二列序号
148.       let select = this.data.date_list[val[0]] + this.data.time_list[val[1]]
149.       console.log(select);
150.       this.setData({
151.         selectDate: select
152.       })
154.     },
155.     showDialog() {
156.       this.setData({
157.         isShow: true
158.       })
159.       //先向下移动dialog高度，然后恢复原位从而形成从下向上弹出效果
160.       this.animation.translateY(this.data.dialogh).translateY(0).step()
161.       this.setData({
162.         animation: this.animation.export()
163.       })
164.     },
165.     dimsss() {
166.       //从原位向下移动dailog高度，形成从上向下的收起效果
167.       this.animation.translateY(this.data.dialogh).step()
168.       this.setData({
169.         animation: this.animation.export()
170.       })
171.       //动画结束后蒙层消失
172.       setTimeout(() => {
173.         this.setData({
174.           isShow: false
175.         })
176.       }, 300)
177.     },
178.     cancel() {
179.       this.triggerEvent("cancel")
180.       this.dimsss()
181.     },
182.     confirm() {
183.       this.triggerEvent("confirm", {
184.         selectDate: this.data.selectDate
185.       })
186.       this.dimsss()
187.     }
188.   }
189. })

复制代码

组件的使用
想在父组件中使用封装好的date-picker组件，先要在父组件的json文件中声明。

1. {
2. "usingComponents": {
3.   "date-picker": "../../components/date-picker/date-picker"
4. },
5. }

复制代码

如果想实现简单的选择时间段并在页面中显示的功能，父组件代码如下编写即可。
父组件wxml文件：

1. <view class="option" bindtap="timeOpen" style="font-size: 16px;">
2.    {{selectDate}}
3. </view>
4. <date-picker id="picker" range="8" step="40" bindconfirm="confirm"></date-picker>

复制代码

父组件js文件：

1. Page({
2.   data: {
3.     selectDate: "",
4.     machineShow: false,
5.   },
6.   onLoad: function () {
7.     this.picker = this.selectComponent("#picker")
8.   },
9.   timeOpen() {
10.     this.picker.showDialog();
11.   },
12.   confirm(e)
13.     this.setData({
14.       selectDate: e.detail.selectDate
15.     })
16.   },
17. })

复制代码

2.结合vant weapp的date-picker
自定义定义的date-picker组件已经可以实现想实现的功能，但自定义的组件样式不够美观。这时，我注意到了小程序可以使用vant的组件库，组件库多列选择器的样式可以自由修改，而且自带样式已经足够美观，所以下面考虑结合vant组件库实现date-picker。
实现效果

具体实现
使用vant weapp的picker组件和popup组件可以更简洁地实现想要的效果，打造自定义的date-picker组件。
首先需要在编写组件的json文件中导入vant weapp的相应组件

1. {
2.   "component": true,
3.   "usingComponents": {
4.     "van-picker": "@vant/weapp/picker/index",
5.     "van-popup": "@vant/weapp/popup/index"
6.   }
7. }

复制代码

然后编写date-picker的wxml文件：

1. <van-popup round show="{{ isShow }}" bind:close="cancel" position="bottom" custom-style="height: 55%">
2. <van-picker show-toolbar columns="{{ date_time_list }}" bind:cancel="cancel" bind:change="change"
3.   bind:confirm="confirm" />
4. </van-popup>

复制代码

因为van-picker的参数columns接受的是一个对象数组，与picker-view有一定差异，所以需要将date-picker的js文件进行如下更改。
1.修改data，增加date_time_list

1. data: {
2.     isShow: false,
3.     selectDate: "",
4.     dialogh: 0,
6.     //日期列表和时间列表
7.     date_list: [],
8.     time_list: [],
9.     date_time_list: [] //增加的字段
10.   },

复制代码

2.修改attached函数

1. //增加的内容
2. let date_time_list = [{
3.         values: date_list
4.       },
5.       {
6.         values: time_list
7.       }
8.     ];
9.     this.setData({
10.       date_list: date_list,
11.       time_list: time_list,
12.       date_time_list: date_time_list //增加的内容
13.     })

复制代码

3.修改change函数

1. change: function (e) {
2.       let val = e.detail.value;
3.       let select = val[0] + val[1];
4.       this.setData({
5.         selectDate: select
6.       })
8.     },

复制代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中国红客联盟。