微信原生的picker只有date和time类型的,没有date-time类型的,要支持date-time类型,可以用原生的multiPicker来实现。本来挺简单一玩意儿,好像网上一下没搜到,贴一下自己的实现:
index.js
const startYear = 2015;
const currentDate = new Date();
function getMaxDate(year,month){
let maxDate = 31;
if([4,6,9,19].indexOf(month)>-1){
maxDate = 30;
}else if(month==2){
if(year % 400 == 0 || (year %4 == 0 && year % 100 >1)){
maxDate=29;
}else{
maxDate=28
}
}
return maxDate;
}
Page({
data: {
multiArray: [
new Array(99).fill(1).map((a,b)=>(b+startYear)+"年"),
new Array(12).fill(1).map((a,b)=>(b+1)+"月"),
new Array(
getMaxDate(
currentDate.getFullYear(),
currentDate.getMonth()+1
)
).fill(1).map((a,b)=>(b+1)+"日"
),
new Array(24).fill(1).map((a,b)=>(b)+"时"),
new Array(12).fill(1).map((a,b)=>(b*5)+"分")
],
multiIndex: [(currentDate.getFullYear()-startYear), currentDate.getMonth(), currentDate.getDate()-1, currentDate.getHours(), Math.ceil(currentDate.getMinutes()/5)]
},
bindMultiPickerChange: function (e) {
this.setData({
multiIndex: e.detail.value
})
},
bindMultiPickerColumnChange: function (e) {
var data = {
multiArray: this.data.multiArray,
multiIndex: this.data.multiIndex
};
data.multiIndex[e.detail.column] = e.detail.value;
if(e.detail.column < 2 ){ //年月发生变化的时候,日期选择范围要变
data.multiArray[2] = new Array(
getMaxDate(
data.multiIndex[0]+startYear,
data.multiIndex[1]+1)
).fill(1).map((a,b)=>(b+1)+"日"
)
}
this.setData(data);
}
})
index.wxml:
<view class="section">
<view class="section__title">日期时间选择器</view>
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
<view class="picker">
当前选择:{{multiArray[0][multiIndex[0]]}},
{{multiArray[1][multiIndex[1]]}},
{{multiArray[2][multiIndex[2]]}},
{{multiArray[3][multiIndex[3]]}},
{{multiArray[4][multiIndex[4]]}}
</view>
</picker>
</view>
这里选择分钟的时候只支持到5分钟一选。需要不同的分钟粒度或者需要选择秒的要自己改一下。