<template> <view class="w-picker-view"> <picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange"> <picker-view-column class="w-picker-flex2"> <view class="w-picker-item" v-for="(item,index) in range.fyears" :key="index">{{item}}年</view> </picker-view-column> <picker-view-column class="w-picker-flex2"> <view class="w-picker-item" v-for="(item,index) in range.fmonths" :key="index">{{item}}月</view> </picker-view-column> <picker-view-column class="w-picker-flex2"> <view class="w-picker-item" v-for="(item,index) in range.fdays" :key="index">{{item}}日</view> </picker-view-column> <picker-view-column class="w-picker-flex1"> <view class="w-picker-item">-</view> </picker-view-column> <picker-view-column class="w-picker-flex2"> <view class="w-picker-item" v-for="(item,index) in range.tyears" :key="index">{{item}}年</view> </picker-view-column> <picker-view-column class="w-picker-flex2"> <view class="w-picker-item" v-for="(item,index) in range.tmonths" :key="index">{{item}}月</view> </picker-view-column> <picker-view-column class="w-picker-flex2"> <view class="w-picker-item" v-for="(item,index) in range.tdays" :key="index">{{item}}日</view> </picker-view-column> </picker-view> </view> </template> <script> export default { data() { return { pickVal:[], range:{}, checkObj:{} }; }, props:{ itemHeight:{ type:String, default:"44px" }, value:{ type:[String,Array], default(){ return [] } }, current:{//是否默认选中当前日期 type:Boolean, default:false }, startYear:{ type:[String,Number], default:1970 }, endYear:{ type:[String,Number], default:new Date().getFullYear() } }, watch:{ value(val){ this.initData(); } }, created() { this.initData(); }, methods:{ formatNum(n){ return (Number(n)<10?'0'+Number(n):Number(n)+''); }, checkValue(value){ let strReg=/^\d{4}-\d{2}-\d{2}$/,example="2020-04-03"; if(!strReg.test(value[0])||!strReg.test(value[1])){ console.log(new Error("请传入与mode匹配的value值,例["+example+","+example+"]")) } return strReg.test(value[0])&&strReg.test(value[1]); }, resetToData(fmonth,fday,tyear,tmonth){ let range=this.range; let tmonths=[],tdays=[]; let yearFlag=tyear!=range.tyears[0]; let monthFlag=tyear!=range.tyears[0]||tmonth!=range.tmonths[0]; let ttotal=new Date(tyear,tmonth,0).getDate(); for(let i=yearFlag?1:fmonth*1;i<=12;i++){ tmonths.push(this.formatNum(i)) } for(let i=monthFlag?1:fday*1;i<=ttotal;i++){ tdays.push(this.formatNum(i)) } return{ tmonths, tdays } }, resetData(fyear,fmonth,fday,tyear,tmonth){ let fyears=[],fmonths=[],fdays=[],tyears=[],tmonths=[],tdays=[]; let startYear=this.startYear; let endYear=this.endYear; let ftotal=new Date(fyear,fmonth,0).getDate(); let ttotal=new Date(tyear,tmonth,0).getDate(); for(let i=startYear*1;i<=endYear;i++){ fyears.push(this.formatNum(i)) } for(let i=1;i<=12;i++){ fmonths.push(this.formatNum(i)) } for(let i=1;i<=ftotal;i++){ fdays.push(this.formatNum(i)) } for(let i=fyear*1;i<=endYear;i++){ tyears.push(this.formatNum(i)) } for(let i=fmonth*1;i<=12;i++){ tmonths.push(this.formatNum(i)) } for(let i=fday*1;i<=ttotal;i++){ tdays.push(this.formatNum(i)) } return { fyears, fmonths, fdays, tyears, tmonths, tdays } }, getData(dVal){ let start=this.startYear*1; let end=this.endYear*1; let value=dVal; let flag=this.current; let aToday=new Date(); let tYear,tMonth,tDay,tHours,tMinutes,tSeconds,pickVal=[]; let initstartDate=new Date(start.toString()); let endDate=new Date(end.toString()); if(start>end){ initstartDate=new Date(end.toString()); endDate=new Date(start.toString()); }; let startYear=initstartDate.getFullYear(); let startMonth=initstartDate.getMonth()+1; let endYear=endDate.getFullYear(); let fyears=[],fmonths=[],fdays=[],tyears=[],tmonths=[],tdays=[],returnArr=[],startDVal=[],endDVal=[]; let curMonth=flag?value[1]*1:(startDVal[1]*1+1); let curMonth1=flag?value[5][1]*1:(value[5]*1+1); let totalDays=new Date(value[0],value[1],0).getDate(); let totalDays1=new Date(value[4],value[5],0).getDate(); for(let s=startYear;s<=endYear;s++){ fyears.push(this.formatNum(s)); }; for(let m=1;m<=12;m++){ fmonths.push(this.formatNum(m)); }; for(let d=1;d<=totalDays;d++){ fdays.push(this.formatNum(d)); }; for(let s=value[0]*1;s<=endYear;s++){ tyears.push(this.formatNum(s)); }; if(value[4]*1>value[0]*1){ for(let m=1;m<=12;m++){ tmonths.push(this.formatNum(m)); }; for(let d=1;d<=totalDays1;d++){ tdays.push(this.formatNum(d)); }; }else{ for(let m=value[1]*1;m<=12;m++){ tmonths.push(this.formatNum(m)); }; for(let d=value[2]*1;d<=totalDays1;d++){ tdays.push(this.formatNum(d)); }; }; pickVal=[ fyears.indexOf(value[0])==-1?0:fyears.indexOf(value[0]), fmonths.indexOf(value[1])==-1?0:fmonths.indexOf(value[1]), fdays.indexOf(value[2])==-1?0:fdays.indexOf(value[2]), 0, tyears.indexOf(value[4])==-1?0:tyears.indexOf(value[4]), tmonths.indexOf(value[5])==-1?0:tmonths.indexOf(value[5]), tdays.indexOf(value[6])==-1?0:tdays.indexOf(value[6]) ]; return { fyears, fmonths, fdays, tyears, tmonths, tdays, pickVal } }, getDval(){ let value=this.value; let fields=this.fields; let dVal=null; let aDate=new Date(); let fyear=this.formatNum(aDate.getFullYear()); let fmonth=this.formatNum(aDate.getMonth()+1); let fday=this.formatNum(aDate.getDate()); let tyear=this.formatNum(aDate.getFullYear()); let tmonth=this.formatNum(aDate.getMonth()+1); let tday=this.formatNum(aDate.getDate()); if(value&&value.length>0){ let flag=this.checkValue(value); if(!flag){ dVal=[fyear,fmonth,fday,"-",tyear,tmonth,tday] }else{ dVal=[...value[0].split("-"),"-",...value[1].split("-")]; } }else{ dVal=[fyear,fmonth,fday,"-",tyear,tmonth,tday] } return dVal; }, initData(){ let range=[],pickVal=[]; let result="",full="",obj={}; let dVal=this.getDval(); let dateData=this.getData(dVal); let fyears=[],fmonths=[],fdays=[],tyears=[],tmonths=[],tdays=[]; let fyear,fmonth,fday,tyear,tmonth,tday; pickVal=dateData.pickVal; fyears=dateData.fyears; fmonths=dateData.fmonths; fdays=dateData.fdays; tyears=dateData.tyears; tmonths=dateData.tmonths; tdays=dateData.tdays; range={ fyears, fmonths, fdays, tyears, tmonths, tdays, } fyear=range.fyears[pickVal[0]]; fmonth=range.fmonths[pickVal[1]]; fday=range.fdays[pickVal[2]]; tyear=range.tyears[pickVal[4]]; tmonth=range.tmonths[pickVal[5]]; tday=range.tdays[pickVal[6]]; obj={ fyear, fmonth, fday, tyear, tmonth, tday } result=`${fyear+'-'+fmonth+'-'+fday+'至'+tyear+'-'+tmonth+'-'+tday}`; this.range=range; this.checkObj=obj; this.$nextTick(()=>{ this.pickVal=pickVal; }); this.$emit("change",{ result:result, value:result.split("至"), obj:obj }) }, handlerChange(e){ let arr=[...e.detail.value]; let result="",full="",obj={}; let year="",month="",day="",hour="",minute="",second="",note=[],province,city,area; let checkObj=this.checkObj; let days=[],months=[],endYears=[],endMonths=[],endDays=[],startDays=[]; let mode=this.mode; let col1,col2,col3,d,a,h,m; let xDate=new Date().getTime(); let range=this.range; let fyear=range.fyears[arr[0]]||range.fyears[range.fyears.length-1]; let fmonth=range.fmonths[arr[1]]||range.fmonths[range.fmonths.length-1]; let fday=range.fdays[arr[2]]||range.fdays[range.fdays.length-1]; let tyear=range.tyears[arr[4]]||range.tyears[range.tyears.length-1]; let tmonth=range.tmonths[arr[5]]||range.tmonths[range.tmonths.length-1]; let tday=range.tdays[arr[6]]||range.tdays[range.tdays.length-1]; let resetData=this.resetData(fyear,fmonth,fday,tyear,tmonth); if(fyear!=checkObj.fyear||fmonth!=checkObj.fmonth||fday!=checkObj.fday){ arr[4]=0; arr[5]=0; arr[6]=0; range.tyears=resetData.tyears; range.tmonths=resetData.tmonths; range.tdays=resetData.tdays; tyear=range.tyears[0]; checkObj.tyears=range.tyears[0]; tmonth=range.tmonths[0]; checkObj.tmonths=range.tmonths[0]; tday=range.tdays[0]; checkObj.tdays=range.tdays[0]; } if(fyear!=checkObj.fyear||fmonth!=checkObj.fmonth){ range.fdays=resetData.fdays; }; if(tyear!=checkObj.tyear){ arr[5]=0; arr[6]=0; let toData=this.resetToData(fmonth,fday,tyear,tmonth); range.tmonths=toData.tmonths; range.tdays=toData.tdays; tmonth=range.tmonths[0]; checkObj.tmonths=range.tmonths[0]; tday=range.tdays[0]; checkObj.tdays=range.tdays[0]; }; if(tmonth!=checkObj.tmonth){ arr[6]=0; let toData=this.resetToData(fmonth,fday,tyear,tmonth); range.tdays=toData.tdays; tday=range.tdays[0]; checkObj.tdays=range.tdays[0]; }; result=`${fyear+'-'+fmonth+'-'+fday+'至'+tyear+'-'+tmonth+'-'+tday}`; obj={ fyear,fmonth,fday,tyear,tmonth,tday } this.checkObj=obj; this.$nextTick(()=>{ this.pickVal=arr; }) this.$emit("change",{ result:result, value:result.split("至"), obj:obj }) } } } </script> <style lang="scss"> @import "./w-picker.css"; </style>