封面图.JPG
前言
做过微信小程序的前端er都知道，小程序有个日期组件，叫picker，但是，需求方要求日期和时间都要显示的，用picker组件的话，那就用到两个picker，date和time，就是说要让用户点击两次，选择好了日期，再选择时间，如下图
日期和时间组件.gif
这样的方式，不是很反人吗？后来需求方要求有简单的操作方式，直观且易操作，于是要求像如下图的
效果图.png
当时我内心有千万个草泥马在奔跑，行吧，我就不信网上没类似这个玩意，就去搜索，结果有了，但是有很大的差别，别怕，只要改造代码就行
image
思路
看上面的效果图，用官方的日期，时间组件合并用，肯定不行的，但官方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,
})
}
}
})
结果图
结果图.gif
附上gitbub地址：https://github.com/FernwehNanxi/datePicker
喜欢的话，就给个star
image
