小程序自定义picker,时间选择:年月日小时,当前时间之前的时间不能选择(详细讲解)
效果图
html
mode=“multiSelector” 多列
bindcolumnchange 列改变时触发事件
bindchange 确定时触发的事件
val的值为选中的值下标
range的值如果为对象,比如{id:0,name:小明] 那么要加属性 rang-key=‘name’ name为对象里需要展示的属性名
<picker mode="multiSelector" start='{{today}}' bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
<view class="picker">
{{askDate==""?"选择送达时间":askDate}}
</view>
</picker>
js
data:{
askDate:"",//显示已选择的时间
multiArray: [//四个数组,有四个选择项 年-月-日-小时
['2021', '2022', '2023','2024','2025','2026','2027','2028','2029','2030','2031'],
['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30'],
["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]
],
multiIndex: [0, 0, 0, 0],//对应上面选择项,选中的下标
normalMon:['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],//正常的月份
normalHour:["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"],//正常的小时
nowDay:[],//保存当前月份剩余的日期天
nowMon:[],//保存当前年份剩余的月份
nowHour:[]//保存当天剩余的小时
}
onLoad: function (options) {
let page=this;
//默认选中当前日期
//获取当前的年-月-日-小时
let time = new Date();
let y = time.getFullYear();
let m = time.getMonth() + 1;
let d = time.getDate();
let h=time.getHours();
var day = new Date(y, m, 0);
var daycount = day.getDate();//获取本月天数
var days=[];
var mons=[];
var hours=[];
//本月剩余天数 比如今天2.24号 days=[24,25,26,27,28]
for(var i=0;i<=daycount-d;i++){
days.push(d+i)
}
//本年剩余月份
for(var j=0;j<=12-m;j++){
mons.push(m+j)
}
//今天剩余小时
for(var k=0;k<=24-h;k++){
hours.push(h+k)
}
//赋值
page.setData({
["multiArray[2]"]: days,
["multiArray[1]"]: mons,
["multiArray[3]"]: hours,
nowDay:days,
nowMon:mons,
nowHour:hours,
});
},
//确定选择(组装数据)
bindMultiPickerChange: function (e) {
let date=this.data.multiArray;//四个选择的数组
let index=this.data.multiIndex;//对应选中的下标
//选择第几个年份的值 比如:date[0]是第一个数组(年)[index[0]]选择的下标
var year=date[0][index[0]];
var mon=date[1][index[1]];
var day=date[2][index[2]];
var hour=date[3][index[3]];
var needdate=''+year+'-'+mon+'-'+day+' '+hour+':00'
this.setData({
multiIndex: e.detail.value,//当前选择的下标[0,0,1,0]
askDate:needdate,//2020-2-24 16:00
})
},
//列改变时
bindMultiPickerColumnChange: function (e) {
let that = this;
var data = {
multiArray: this.data.multiArray,
multiIndex: this.data.multiIndex
};
//e.detail.column是第几列、e.detail.value是选择的下标
data.multiIndex[e.detail.column] = e.detail.value;
//选择年月日时
switch (e.detail.column) {
case 0://第一列发生改变时 年
switch (data.multiIndex[0]) {//switch 选中的数组的第1个值 年
case 0://如果第一列选择的是第一个 下标为0时(即本年)
data.multiArray[1] = that.data.nowMon;//月份为本年剩余的月份
data.multiArray[2] = that.data.nowDay;//天数为本月剩余的天数
data.multiArray[3] = that.data.nowHour;//小时为今天剩余的小时
break;
default://第一列选择的不是第一个
data.multiArray[1] = that.data.normalMon;正常月份 一年12个月
data.multiArray[2] = that.getDay(e.detail.value);选择的月的天数
data.multiArray[3] = that.data.normalHour;//正常一天24小时
break;
}
//更改年份之后,月,日,小时 恢复选择下标为0的数
data.multiIndex[1]=0;
data.multiIndex[2]=0;
data.multiIndex[3]=0;
break;
case 1://第二列发生改变时 月
switch (data.multiIndex[1]) { //switch 选中的数组的第二个值 月
case 0://第二列 月选择的下标为0时 即本月
data.multiArray[2] = that.data.nowDay;//本月剩余天数
data.multiArray[3] = that.data.nowHour;//本天剩余小时
break;
default:
data.multiArray[2] = that.getDay(e.detail.value);//获取选择月份的天数
data.multiArray[3] = that.data.normalHour;//正常小时
break;
}
//选择月份后,日期和小时自动恢复选择第一个
data.multiIndex[2]=0;
data.multiIndex[3]=0;
break;
case 2:
switch (data.multiIndex[2]) {
case 0:
data.multiArray[3] = that.data.nowHour;
break;
default:
data.multiArray[3] = that.data.normalHour;
break;
}
data.multiIndex[3]=0;
break;
}
this.setData(data);
},
//获取月份的天数
getDay: function (mon) {
let daysOfMonth = [];
var Year = this.data.multiArray[0][this.data.multiIndex[0]];//选择的年
var mon = this.data.multiArray[1][this.data.multiIndex[1]];
var day = new Date(Year, mon, 0);
for (var i = 1; i <= daycount; i++) {
daysOfMonth.push(i);
};
return daysOfMonth;
},
//end
逻辑有点复杂但是不难,每一步都很详细,仔细看可以看懂