前言
做过微信小程序的前端er都知道，小程序有个日期组件，叫picker，但是，需求方要求日期和时间都要显示的，用picker组件的话，那就用到两个picker，date和time，就是说要让用户点击两次，选择好了日期，再选择时间，如下图
当时我内心有千万个草泥马在奔跑，行吧，我就不信网上没类似这个玩意，就去搜索，结果有了，但是有很大的差别，别怕，只要改造代码就行
思路
看上面的效果图，用官方的日期，时间组件合并用，肯定不行的，但官方picker有个mode，叫multiSelector，官方的解释是
mode为 selector 或 multiSelector 时，range 有效。二维数组，长度表示多少列，数组的每项表示每列的数据，如[["a","b"], ["c","d"]]
这数组可以自定义的，听起来跟上面的效果图需求蛮符合的，但数组怎么自定义的，这就需要js来实现的，我已经写成一个日期组件的库，下面会附上github地址。
wxml
<view class="section"> <view class="section__title" style="margin-bottom:0;">时间：</view> <picker mode="multiSelector" range="{{dateArray}}" value="{{dateIndex}}" bindchange="datePickerChange"> <view class="section-val">{{dateVal}}</view> </picker></view>复制代码Tip：dateIndex是选择了 range 对应项中的第几个（下标从 0 开始），与其他的普通组件，日期组件，时间组件不一样
js
先导入日期组件的js，然后加载时，就把日期组件的对象分别赋值给range和value的值，默认值是当前的时间，目前不支持传入要选择的时间（后面会考虑增加），其中的month和day是用日期组件的库里获取的
const datePicker=require('../lib/datePicker');Page({ data: { dateArray: null,//picker-rang的值 dateIndex:null,//picker-value的值 dateVal:null,//显示的时间 }, //加载时获取日期的组件 onLoad(){ this.set_date(); }, //监听点击日期组件的事件变化 datePickerChange(e){ this.setData({ dateIndex:e.detail.value, }) this.set_newDateForm(); }, //赋值 set_date(){ let date=datePicker.dateTimePicker(); date.dateTimeArray.pop(); date.dateTime.pop(); this.setData({ dateArray: date.dateTimeArray, dateIndex: date.dateTime, }) this.set_newDateForm(); }, //格式化现在的时间，比如今天改成xx月xx日 set_newDateForm(){ let tempDate=this.data.dateArray[0][this.data.dateIndex[0]]; let month=datePicker.month; let day=datePicker.day; let time=this.data.dateArray[1][this.data.dateIndex[1]]+':'+this.data.dateArray[2][this.data.dateIndex[2]]; if(tempDate.indexOf('今天')>-1){ this.setData({ dateVal: datePicker.withData(month) + '月' + datePicker.withData(day) + '日' + ' ' + time, }) }else if(tempDate.indexOf('明天')>-1){ this.setData({ dateVal: datePicker.withData(month) + '月' + datePicker.withData((Number(day)+1)) + '日' + ' ' + time, }) }else if(tempDate.indexOf('后天')>-1){ this.setData({ dateVal: datePicker.withData(month) + '月' + datePicker.withData((Number(day)+2)) + '日' + ' ' + time, }) }else{ this.setData({ dateVal: tempDate + ' ' + time, }) } }})复制代码结果图
附上gitbub地址：github.com/FernwehNanx…
喜欢的话，就给个star
