--- theme: cyanosis --- 这是我参与8月更文挑战的第27天，活动详情查看：[8月更文挑战](https://juejin.cn/post/6987962113788493831 "https://juejin.cn/post/6987962113788493831") ### 需求：小程序从底部弹出时间选择要求的效果是如图所示： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ba6c0220dfd442fea0eb8bd06550048c~tplv-k3u1fbpfcp-watermark.image) ### 思路需要两个数组就可以显示这个东西：第一个数组是包含所有我们要显示的信息，第二个数组是我们所选择下标信息的索引值如果不理解这句话就看下面的实现过程： - 要想日期从底部弹出可以使用Picker组件（）(从底部弹起的滚动选择器) [从官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/picker.html)可知我们要从底部弹出一个时间选择器需要的是多列选择器，而对于不同的mode，`picker`拥有不同的属性 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5fb05fa06ad24decbf480c0c60d86cd9~tplv-k3u1fbpfcp-watermark.image) ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0aaf35cc395b42c7950bb53ce79eef70~tplv-k3u1fbpfcp-watermark.image) 因此如果要选择器显示不同的内容最主要修改的就是大数组中的内容即range这个数组中的内容这才是重点！！！！ - 那么首先 range传入的是数组型格式应该是：[[] [] []] ，从目前的需求来看，在这个大数组下面包含三个小数组，第一个小数组的内容就应该是（日期加周几），第二个小数组是具体哪一小时，第三个小数组是具体的分钟数。这里有三列，则这个时间选择器就弹出多少列(这里弹出的是三列) 例如选择（2021-01-15 周五）（02点）（20分）那value(第二个数组)这个数组的值[1, 2, 2],这里的1，2，2是所选择的值在第一个大数组中每个小数组的索引值。当我们触发这个选择器的时候当选择确定就会改变value中数组的下标值从而修改我们显示的数据如下为第一个大数组中的数据： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d788dfe49d134f1cb42b8e7502c0245d~tplv-k3u1fbpfcp-watermark.image) ### 主要代码展示的页面 ``` 时间选择(未处理)：时间选择(处理后)： {{cartime}} ``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f079730fc26844cd8e14581411f5ce2c~tplv-k3u1fbpfcp-watermark.image) JS代码 ``` var dateTimePicker = require('../../utils/dateTimePicker.js'); /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { //获取当前时间 var timestamp = Date.parse(new Date()); var date = new Date(timestamp); // 获取完整的年月日时分秒，以及默认显示的数组 var obj1 = dateTimePicker.dateTimePicker(30, date); console.log("obj1",obj1); this.setData({ dateTimeArray: obj1.dateTimeArray, dateTime: obj1.dateTime, }); }, //当触发选择时间得时候 changeDateTime1(e) { this.setData({ dateTime: e.detail.value }); console.log("dateTime",this.data.dateTime); var changeTime = this.data.dateTimeArray[0][this.data.dateTime[0]]+" "+this.data.dateTimeArray[1][this.data.dateTime[1]]+" "+this.data.dateTimeArray[2][this.data.dateTime[2]]; console.log("changeTime",changeTime); var times = changeTime.split(" "); var time = times[0]+" "+times[2].substring(0,2)+":"+times[3].substring(0,2)+":00"; this.setData({ cartime: time, showtime: changeTime }) }, ``` 具体的代码可以查看：https://gitee.com/childrens_1/wechat-tools ### 总结在微信小程序中实现日期选择这里分享的是通过数组的方式，主要利用微信原生写的当然通过数组的选择是比较不灵活的他的日期选择范围是有限的但是他的组合显示是比较灵活的所以要根据具体情况选择合适的日期插件