345 lines
9.8 KiB
Vue
345 lines
9.8 KiB
Vue
|
<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>
|