php 今天 明天 后天 显示10天,【微信小程序】实现含有今天，明天，后天的日期组件...

封面图.JPG

前言

做过微信小程序的前端er都知道，小程序有个日期组件，叫picker，但是，需求方要求日期和时间都要显示的，用picker组件的话，那就用到两个picker，date和time，就是说要让用户点击两次，选择好了日期，再选择时间，如下图

日期和时间组件.gif

这样的方式，不是很反人吗？后来需求方要求有简单的操作方式，直观且易操作，于是要求像如下图的

效果图.png

当时我内心有千万个草泥马在奔跑，行吧，我就不信网上没类似这个玩意，就去搜索，结果有了，但是有很大的差别，别怕，只要改造代码就行

image

思路

看上面的效果图，用官方的日期，时间组件合并用，肯定不行的，但官方picker有个mode，叫multiSelector，官方的解释是

mode为 selector 或 multiSelector 时，range 有效。二维数组，长度表示多少列，数组的每项表示每列的数据，如[["a","b"], ["c","d"]]

这数组可以自定义的，听起来跟上面的效果图需求蛮符合的，但数组怎么自定义的，这就需要js来实现的，我已经写成一个日期组件的库，下面会附上github地址。

wxml

时间：

{{dateVal}}

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

喜欢的话，就给个star

image