需求:h5页面需要年月日时分秒,
方法:weui得datePicker插件只有年月日得,所以时分秒就要单独用picker插件单独配置一个,网上有类似得,难点就在于在第一个年月日关闭后就弹出时分秒得弹框,这个我是加在第一个弹框关闭得onClose里调用得时分秒弹框,网上也有其他方法,在我这里无效
不足:弹出二次弹框得体验
isWhichTime:function (timeSelector) {
let _this=this;
weui.datePicker({
//end:2030,
id: new Date(),//每次打开就是当天时间,而不是上一次选择得时间,因为源码里是如果上次有选择过,就显示上次选择得,这样如果是几个共用一个日期框,回显会有问题
defaultValue: [new Date().getFullYear(), new Date().getMonth()+1, new Date().getDate()],
onConfirm: result=> {
//把年月份保存成全局变量
_this.data.firstTime = result;
},
onClose:e=>{
//二次调用时分秒
_this.actions.secondPicker(_this, this.data.firstTime,timeSelector);
}
})
},
//二次调用日期:时分秒
secondPicker:function(_this,result,timeSelector){
//统一格式 yyyy-mm-dd hh:mm:ss
if (result[1].value<11) {
result[1].value = '0'+ result[1].value;
}
if (result[2].value<11) {
result[2].value = '0'+ result[2].value;
}
//统一格式 yyyy-mm-dd hh:mm:ss
let dateTime = result[0].value+'-'+result[1].value+'-'+result[2].value+' ';
let hours = [];
let minite = [];
let seconds = [];
if(!hours.length) {
hours=this.actions.costomDatePicker(hours,0,60,"时")
}
if(!minite.length) {
minite=this.actions.costomDatePicker(minite,0,60,"分")
}
if(!seconds.length) {
seconds=this.actions.costomDatePicker(seconds,0,60,"秒")
}
weui.picker(hours,minite,seconds,{
//end:2030,
id: new Date(),
defaultValue: [new Date().getHours(),new Date().getMinutes(),new Date().getSeconds()],
onConfirm: result=> {
//result 是数组,返回得是当前选中得数,如[{lable:'2019年,value:2019},{lable:'2月,value:2},{lable:'2号,value:2}]
if (result.length){
let time=dateTime+result[0].value+':'+result[1].value+':'+result[2].value;
console.log('time',time)
_this.el.find(timeSelector).val(time);
}
},
})
},
月日时分秒得判断统一方法:
//自定义日期:月时分秒
costomDatePicker:function(years,startTime,endTime,str){
for(let j = startTime; j < endTime; j++) {
years.push({
label: ('' + j).length === 1 ? '0'+j + str : '' + j + str,
value: ('' + j).length === 1 ? '0'+j : '' + j ,
});
}
return years;
},