<template> <view class="w-picker-view"> <picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange"> <picker-view-column> <view class="w-picker-item" v-for="(item,index) in range.dates" :key="index">{{item.label}}</view> </picker-view-column> <picker-view-column> <view class="w-picker-item" v-for="(item,index) in range.hours" :key="index">{{item.label}}时</view> </picker-view-column> <picker-view-column> <view class="w-picker-item" v-for="(item,index) in range.minutes" :key="index">{{item.label}}分</view> </picker-view-column> </picker-view> </view> </template> <script> let _this=null; export default { data() { return { pickVal:[], range:{}, checkObj:{} }; }, props:{ itemHeight:{ type:String, default:"44px" }, value:{ type:[String,Array,Number], default:"" }, current:{//是否默认选中当前日期 type:Boolean, default:false }, expand:{ type:[Number,String], default:30 } }, watch:{ value(val){ this.initData(); } }, created() { _this=this; _this.initData(); }, methods:{ formatNum(n){ return (Number(n)<10?'0'+Number(n):Number(n)+''); }, checkValue(value){ let strReg=/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}(:\d{2})?$/,example="2019-12-12 18:05:00或者2019-12-12 18:05"; if(!strReg.test(value)){ console.log(new Error("请传入与mode、fields匹配的value值,例value="+example+"")) } return strReg.test(value); }, resetData(year,month,day){ let curDate=_this.getCurrenDate(); let curFlag=_this.current; let curYear=curDate.curYear; let curMonth=curDate.curMonth; let curDay=curDate.curDay; let curHour=curDate.curHour; let months=[],days=[],sections=[]; let disabledAfter=_this.disabledAfter; let monthsLen=disabledAfter?(year*1<curYear?12:curMonth):12; let totalDays=new Date(year,month,0).getDate();//计算当月有几天; for(let month=1;month<=monthsLen;month++){ months.push(_this.formatNum(month)); }; for(let day=1;day<=daysLen;day++){ days.push(_this.formatNum(day)); } return{ months, days, sections } }, getData(dVal){ //用来处理初始化数据 let curFlag=_this.current; let disabledAfter=_this.disabledAfter; let dates=[],hours=[],minutes=[]; let curDate=new Date(); let curYear=curDate.getFullYear(); let curMonth=curDate.getMonth(); let curDay=curDate.getDate(); let aDate=new Date(curYear,curMonth,curDay); for(let i=0;i<this.expand*1;i++){ aDate=new Date(curYear,curMonth,curDay+i); let year=aDate.getFullYear(); let month=aDate.getMonth()+1; let day=aDate.getDate(); let label=year+"-"+_this.formatNum(month)+"-"+_this.formatNum(day); switch(i){ case 0: label="今天"; break; case 1: label="明天"; break; case 2: label="后天"; break } dates.push({ label:label, value:year+"-"+_this.formatNum(month)+"-"+_this.formatNum(day) }) }; for(let i=0;i<24;i++){ hours.push({ label:_this.formatNum(i), value:_this.formatNum(i) }) } for(let i=0;i<60;i++){ minutes.push({ label:_this.formatNum(i), value:_this.formatNum(i) }) } return { dates, hours, minutes } }, getDefaultDate(){ let value=_this.value; let reg=/-/g; let defaultDate=value?new Date(value.replace(reg,"/")):new Date(); let defaultYear=defaultDate.getFullYear(); let defaultMonth=defaultDate.getMonth()+1; let defaultDay=defaultDate.getDate(); let defaultDays=new Date(defaultYear,defaultMonth,0).getDate()*1; return{ defaultDate, defaultYear, defaultMonth, defaultDay, defaultDays } }, getDval(){ let value=_this.value; let dVal=null; let aDate=new Date(); let year=_this.formatNum(aDate.getFullYear()); let month=_this.formatNum(aDate.getMonth()+1); let day=_this.formatNum(aDate.getDate()); let date=_this.formatNum(year)+"-"+_this.formatNum(month)+"-"+_this.formatNum(day); let hour=aDate.getHours(); let minute=aDate.getMinutes(); if(value){ let flag=_this.checkValue(value); if(!flag){ dVal=[date,hour,minute] }else{ let v=value.split(" "); dVal=[v[0],...v[1].split(":")]; } }else{ dVal=[date,hour,minute] } return dVal; }, initData(){ let startDate,endDate,startYear,endYear,startMonth,endMonth,startDay,endDay; let dates=[],hours=[],minutes=[]; let dVal=[],pickVal=[]; let value=_this.value; let reg=/-/g; let range={}; let result="",full="",date,hour,minute,obj={}; let defaultDate=_this.getDefaultDate(); let defaultYear=defaultDate.defaultYear; let defaultMonth=defaultDate.defaultMonth; let defaultDay=defaultDate.defaultDay; let defaultDays=defaultDate.defaultDays; let curFlag=this.current; let disabledAfter=this.disabledAfter; let dateData=[]; dVal=_this.getDval(); dateData=_this.getData(dVal); dates=dateData.dates; hours=dateData.hours; minutes=dateData.minutes; pickVal=[ dates.findIndex(n => n.value == dVal[0])!=-1?dates.findIndex(n => n.value == dVal[0]):0, hours.findIndex(n => n.value == dVal[1])!=-1?hours.findIndex(n => n.value == dVal[1]):0, minutes.findIndex(n => n.value == dVal[2])!=-1?minutes.findIndex(n => n.value == dVal[2]):0, ]; range={dates,hours,minutes}; date=dVal[0]?dVal[0]:dates[0].label; hour=dVal[1]?dVal[1]:hours[0].label; minute=dVal[2]?dVal[2]:minutes[0].label; result=full=`${date+' '+hour+':'+minute}`; obj={ date, hour, minute } _this.range=range; _this.checkObj=obj; _this.$nextTick(()=>{ _this.pickVal=pickVal; }); _this.$emit("change",{ result:result, value:full, obj:obj }) }, handlerChange(e){ let arr=[...e.detail.value]; let data=_this.range; let date="",hour="",minute=""; let result="",full="",obj={}; let disabledAfter=_this.disabledAfter; date=(arr[0]||arr[0]==0)?data.dates[arr[0]]||data.dates[data.dates.length-1]:""; hour=(arr[1]||arr[1]==0)?data.hours[arr[1]]||data.hours[data.hours.length-1]:""; minute=(arr[2]||arr[2]==0)?data.minutes[arr[2]]||data.minutes[data.minutes.length-1]:""; result=full=`${date.label+' '+hour.label+':'+minute.label+':00'}`; obj={ date, hour, minute } this.checkObj=obj; _this.$emit("change",{ result:result, value:full, obj:obj }) } } } </script> <style lang="scss"> @import "./w-picker.css"; </style>