mirror of
https://gitee.com/hhyykk/ipms-sjy.git
synced 2025-07-07 15:45:08 +08:00
引入级联选择插件w-picker
This commit is contained in:
sfmind
742
yudao-ui-app/components/w-picker/date-picker.vue
Normal file
742
yudao-ui-app/components/w-picker/date-picker.vue
Normal file
@ -0,0 +1,742 @@
|
||||
<template>
|
||||
<view class="w-picker-view">
|
||||
<picker-view v-if="fields=='year'" 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.years" :key="index">{{item}}年</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
<picker-view v-if="fields=='month'" 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.years" :key="index">{{item}}年</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="w-picker-item" v-for="(item,index) in range.months" :key="index">{{item}}月</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
<picker-view v-if="fields=='day'" 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.years" :key="index">{{item}}年</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="w-picker-item" v-for="(item,index) in range.months" :key="index">{{item}}月</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="w-picker-item" v-for="(item,index) in range.days" :key="index">{{item}}日</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
<picker-view v-if="fields=='hour'" 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.years" :key="index">{{item}}年</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="w-picker-item" v-for="(item,index) in range.months" :key="index">{{item}}月</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="w-picker-item" v-for="(item,index) in range.days" :key="index">{{item}}日</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="w-picker-item" v-for="(item,index) in range.hours" :key="index">{{item}}时</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
<picker-view v-if="fields=='minute'" 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.years" :key="index">{{item}}年</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="w-picker-item" v-for="(item,index) in range.months" :key="index">{{item}}月</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="w-picker-item" v-for="(item,index) in range.days" :key="index">{{item}}日</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="w-picker-item" v-for="(item,index) in range.hours" :key="index">{{item}}时</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="w-picker-item" v-for="(item,index) in range.minutes" :key="index">{{item}}分</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
<picker-view v-if="fields=='second'" 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.years" :key="index">{{item}}年</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="w-picker-item" v-for="(item,index) in range.months" :key="index">{{item}}月</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="w-picker-item" v-for="(item,index) in range.days" :key="index">{{item}}日</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="w-picker-item" v-for="(item,index) in range.hours" :key="index">{{item}}时</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="w-picker-item" v-for="(item,index) in range.minutes" :key="index">{{item}}分</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="w-picker-item" v-for="(item,index) in range.seconds" :key="index">{{item}}秒</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickVal:[],
|
||||
range:{
|
||||
years:[],
|
||||
months:[],
|
||||
days:[],
|
||||
hours:[],
|
||||
minutes:[],
|
||||
seconds:[]
|
||||
},
|
||||
checkObj:{}
|
||||
};
|
||||
},
|
||||
props:{
|
||||
itemHeight:{
|
||||
type:String,
|
||||
default:"44px"
|
||||
},
|
||||
startYear:{
|
||||
type:[String,Number],
|
||||
default:""
|
||||
},
|
||||
endYear:{
|
||||
type:[String,Number],
|
||||
default:""
|
||||
},
|
||||
value:{
|
||||
type:[String,Array,Number],
|
||||
default:""
|
||||
},
|
||||
current:{//是否默认选中当前日期
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
disabledAfter:{//是否禁用当前之后的日期
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
fields:{
|
||||
type:String,
|
||||
default:"day"
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
fields(val){
|
||||
this.initData();
|
||||
},
|
||||
value(val){
|
||||
this.initData();
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initData();
|
||||
},
|
||||
methods:{
|
||||
formatNum(n){
|
||||
return (Number(n)<10?'0'+Number(n):Number(n)+'');
|
||||
},
|
||||
checkValue(value){
|
||||
let strReg,example
|
||||
switch(this.fields){
|
||||
case "year":
|
||||
strReg=/^\d{4}$/;
|
||||
example="2019";
|
||||
break;
|
||||
case "month":
|
||||
strReg=/^\d{4}-\d{2}$/;
|
||||
example="2019-02";
|
||||
break;
|
||||
case "day":
|
||||
strReg=/^\d{4}-\d{2}-\d{2}$/;
|
||||
example="2019-02-01";
|
||||
break;
|
||||
case "hour":
|
||||
strReg=/^\d{4}-\d{2}-\d{2} \d{2}(:\d{2}){1,2}?$/;
|
||||
example="2019-02-01 18:00:00或2019-02-01 18";
|
||||
break;
|
||||
case "minute":
|
||||
strReg=/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}(:\d{2}){0,1}?$/;
|
||||
example="2019-02-01 18:06:00或2019-02-01 18:06";
|
||||
break;
|
||||
case "second":
|
||||
strReg=/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/;
|
||||
example="2019-02-01 18:06:01";
|
||||
break;
|
||||
}
|
||||
if(!strReg.test(value)){
|
||||
console.log(new Error("请传入与mode、fields匹配的value值，例value="+example+""))
|
||||
}
|
||||
return strReg.test(value);
|
||||
},
|
||||
resetData(year,month,day,hour,minute){
|
||||
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 curMinute=curDate.curMinute;
|
||||
let curSecond=curDate.curSecond;
|
||||
let months=[],days=[],hours=[],minutes=[],seconds=[];
|
||||
let disabledAfter=this.disabledAfter;
|
||||
let monthsLen=disabledAfter?(year*1<curYear?12:curMonth):12;
|
||||
let totalDays=new Date(year,month,0).getDate();//计算当月有几天;
|
||||
let daysLen=disabledAfter?((year*1<curYear||month*1<curMonth)?totalDays:curDay):totalDays;
|
||||
let hoursLen=disabledAfter?((year*1<curYear||month*1<curMonth||day*1<curDay)?24:curHour+1):24;
|
||||
let minutesLen=disabledAfter?((year*1<curYear||month*1<curMonth||day*1<curDay||hour*1<curHour)?60:curMinute+1):60;
|
||||
let secondsLen=disabledAfter?((year*1<curYear||month*1<curMonth||day*1<curDay||hour*1<curHour||minute*1<curMinute)?60:curSecond+1):60;
|
||||
for(let month=1;month<=monthsLen;month++){
|
||||
months.push(this.formatNum(month));
|
||||
};
|
||||
for(let day=1;day<=daysLen;day++){
|
||||
days.push(this.formatNum(day));
|
||||
}
|
||||
for(let hour=0;hour<hoursLen;hour++){
|
||||
hours.push(this.formatNum(hour));
|
||||
}
|
||||
for(let minute=0;minute<minutesLen;minute++){
|
||||
minutes.push(this.formatNum(minute));
|
||||
}
|
||||
for(let second=0;second<secondsLen;second++){
|
||||
seconds.push(this.formatNum(second));
|
||||
}
|
||||
return{
|
||||
months,
|
||||
days,
|
||||
hours,
|
||||
minutes,
|
||||
seconds
|
||||
}
|
||||
},
|
||||
isLeapYear (Year) {
|
||||
if (((Year % 4)==0) && ((Year % 100)!=0) || ((Year % 400)==0)) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
getData(dVal){
|
||||
//用来处理初始化数据
|
||||
let curFlag=this.current;
|
||||
let disabledAfter=this.disabledAfter;
|
||||
let fields=this.fields;
|
||||
let curDate=this.getCurrenDate();
|
||||
let curYear=curDate.curYear;
|
||||
let curMonthdays=curDate.curMonthdays;
|
||||
let curMonth=curDate.curMonth;
|
||||
let curDay=curDate.curDay;
|
||||
let curHour=curDate.curHour;
|
||||
let curMinute=curDate.curMinute;
|
||||
let curSecond=curDate.curSecond;
|
||||
let defaultDate=this.getDefaultDate();
|
||||
let startYear=this.getStartDate().getFullYear();
|
||||
let endYear=this.getEndDate().getFullYear();
|
||||
//颗粒度，禁用当前之后日期仅对year,month,day,hour生效;分钟秒禁用没有意义,
|
||||
let years=[],months=[],days=[],hours=[],minutes=[],seconds=[];
|
||||
let year=dVal[0]*1;
|
||||
let month=dVal[1]*1;
|
||||
let day=dVal[2]*1;
|
||||
let hour=dVal[3]*1;
|
||||
let minute=dVal[4]*1;
|
||||
let monthsLen=disabledAfter?(year<curYear?12:curDate.curMonth):12;
|
||||
let daysLen=disabledAfter?((year<curYear||month<curMonth)?defaultDate.defaultDays:curDay):(curFlag?curMonthdays:defaultDate.defaultDays);
|
||||
let hoursLen=disabledAfter?((year<curYear||month<curMonth||day<curDay)?24:curHour+1):24;
|
||||
let minutesLen=disabledAfter?((year<curYear||month<curMonth||day<curDay||hour<curHour)?60:curMinute+1):60;
|
||||
let secondsLen=disabledAfter?((year<curYear||month<curMonth||day<curDay||hour<curHour||minute<curMinute)?60:curSecond+1):60;
|
||||
for(let year=startYear;year<=(disabledAfter?curYear:endYear);year++){
|
||||
years.push(year.toString())
|
||||
}
|
||||
for(let month=1;month<=monthsLen;month++){
|
||||
months.push(this.formatNum(month));
|
||||
}
|
||||
for(let day=1;day<=daysLen;day++){
|
||||
days.push(this.formatNum(day));
|
||||
}
|
||||
for(let hour=0;hour<hoursLen;hour++){
|
||||
hours.push(this.formatNum(hour));
|
||||
}
|
||||
for(let minute=0;minute<minutesLen;minute++){
|
||||
minutes.push(this.formatNum(minute));
|
||||
}
|
||||
// for(let second=0;second<(disabledAfter?curDate.curSecond+1:60);second++){
|
||||
// seconds.push(this.formatNum(second));
|
||||
// }
|
||||
for(let second=0;second<60;second++){
|
||||
seconds.push(this.formatNum(second));
|
||||
}
|
||||
return {
|
||||
years,
|
||||
months,
|
||||
days,
|
||||
hours,
|
||||
minutes,
|
||||
seconds
|
||||
}
|
||||
},
|
||||
getCurrenDate(){
|
||||
let curDate=new Date();
|
||||
let curYear=curDate.getFullYear();
|
||||
let curMonth=curDate.getMonth()+1;
|
||||
let curMonthdays=new Date(curYear,curMonth,0).getDate();
|
||||
let curDay=curDate.getDate();
|
||||
let curHour=curDate.getHours();
|
||||
let curMinute=curDate.getMinutes();
|
||||
let curSecond=curDate.getSeconds();
|
||||
return{
|
||||
curDate,
|
||||
curYear,
|
||||
curMonth,
|
||||
curMonthdays,
|
||||
curDay,
|
||||
curHour,
|
||||
curMinute,
|
||||
curSecond
|
||||
}
|
||||
},
|
||||
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
|
||||
}
|
||||
},
|
||||
getStartDate(){
|
||||
let start=this.startYear;
|
||||
let startDate="";
|
||||
let reg=/-/g;
|
||||
if(start){
|
||||
startDate=new Date(start+"/01/01");
|
||||
}else{
|
||||
startDate=new Date("1970/01/01");
|
||||
}
|
||||
return startDate;
|
||||
},
|
||||
getEndDate(){
|
||||
let end=this.endYear;
|
||||
let reg=/-/g;
|
||||
let endDate="";
|
||||
if(end){
|
||||
endDate=new Date(end+"/12/01");
|
||||
}else{
|
||||
endDate=new Date();
|
||||
}
|
||||
return endDate;
|
||||
},
|
||||
getDval(){
|
||||
let value=this.value;
|
||||
let fields=this.fields;
|
||||
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 hour=this.formatNum(aDate.getHours());
|
||||
let minute=this.formatNum(aDate.getMinutes());
|
||||
let second=this.formatNum(aDate.getSeconds());
|
||||
if(value){
|
||||
let flag=this.checkValue(value);
|
||||
if(!flag){
|
||||
dVal=[year,month,day,hour,minute,second]
|
||||
}else{
|
||||
switch(this.fields){
|
||||
case "year":
|
||||
dVal=value?[value]:[];
|
||||
break;
|
||||
case "month":
|
||||
dVal=value?value.split("-"):[];
|
||||
break;
|
||||
case "day":
|
||||
dVal=value?value.split("-"):[];
|
||||
break;
|
||||
case "hour":
|
||||
dVal=[...value.split(" ")[0].split("-"),...value.split(" ")[1].split(":")];
|
||||
break;
|
||||
case "minute":
|
||||
dVal=value?[...value.split(" ")[0].split("-"),...value.split(" ")[1].split(":")]:[];
|
||||
break;
|
||||
case "second":
|
||||
dVal=[...value.split(" ")[0].split("-"),...value.split(" ")[1].split(":")];
|
||||
break;
|
||||
}
|
||||
}
|
||||
}else{
|
||||
dVal=[year,month,day,hour,minute,second]
|
||||
}
|
||||
return dVal;
|
||||
},
|
||||
initData(){
|
||||
let startDate,endDate,startYear,endYear,startMonth,endMonth,startDay,endDay;
|
||||
let years=[],months=[],days=[],hours=[],minutes=[],seconds=[];
|
||||
let dVal=[],pickVal=[];
|
||||
let value=this.value;
|
||||
let reg=/-/g;
|
||||
let range={};
|
||||
let result="",full="",year,month,day,hour,minute,second,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 curDate=this.getCurrenDate();
|
||||
let curYear=curDate.curYear;
|
||||
let curMonth=curDate.curMonth;
|
||||
let curMonthdays=curDate.curMonthdays;
|
||||
let curDay=curDate.curDay;
|
||||
let curHour=curDate.curHour;
|
||||
let curMinute=curDate.curMinute;
|
||||
let curSecond=curDate.curSecond;
|
||||
let dateData=[];
|
||||
dVal=this.getDval();
|
||||
|
||||
startDate=this.getStartDate();
|
||||
endDate=this.getEndDate();
|
||||
startYear=startDate.getFullYear();
|
||||
startMonth=startDate.getMonth();
|
||||
startDay=startDate.getDate();
|
||||
endYear=endDate.getFullYear();
|
||||
endMonth=endDate.getMonth();
|
||||
endDay=endDate.getDate();
|
||||
dateData=this.getData(dVal);
|
||||
years=dateData.years;
|
||||
months=dateData.months;
|
||||
days=dateData.days;
|
||||
hours=dateData.hours;
|
||||
minutes=dateData.minutes;
|
||||
seconds=dateData.seconds;
|
||||
switch(this.fields){
|
||||
case "year":
|
||||
pickVal=disabledAfter?[
|
||||
dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0
|
||||
]:(curFlag?[
|
||||
years.indexOf(curYear+'')
|
||||
]:[
|
||||
dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0
|
||||
]);
|
||||
range={years};
|
||||
year=dVal[0]?dVal[0]:years[0];
|
||||
result=full=`${year}`;
|
||||
obj={
|
||||
year
|
||||
}
|
||||
break;
|
||||
case "month":
|
||||
pickVal=disabledAfter?[
|
||||
dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0,
|
||||
dVal[1]&&months.indexOf(dVal[1])!=-1?months.indexOf(dVal[1]):0
|
||||
]:(curFlag?[
|
||||
years.indexOf(curYear+''),
|
||||
months.indexOf(this.formatNum(curMonth))
|
||||
]:[
|
||||
dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0,
|
||||
dVal[1]&&months.indexOf(dVal[1])!=-1?months.indexOf(dVal[1]):0
|
||||
]);
|
||||
range={years,months};
|
||||
year=dVal[0]?dVal[0]:years[0];
|
||||
month=dVal[1]?dVal[1]:months[0];
|
||||
result=full=`${year+'-'+month}`;
|
||||
obj={
|
||||
year,
|
||||
month
|
||||
}
|
||||
break;
|
||||
case "day":
|
||||
pickVal=disabledAfter?[
|
||||
dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0,
|
||||
dVal[1]&&months.indexOf(dVal[1])!=-1?months.indexOf(dVal[1]):0,
|
||||
dVal[2]&&days.indexOf(dVal[2])!=-1?days.indexOf(dVal[2]):0
|
||||
]:(curFlag?[
|
||||
years.indexOf(curYear+''),
|
||||
months.indexOf(this.formatNum(curMonth)),
|
||||
days.indexOf(this.formatNum(curDay)),
|
||||
]:[
|
||||
dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0,
|
||||
dVal[1]&&months.indexOf(dVal[1])!=-1?months.indexOf(dVal[1]):0,
|
||||
dVal[2]&&days.indexOf(dVal[2])!=-1?days.indexOf(dVal[2]):0
|
||||
]);
|
||||
range={years,months,days};
|
||||
year=dVal[0]?dVal[0]:years[0];
|
||||
month=dVal[1]?dVal[1]:months[0];
|
||||
day=dVal[2]?dVal[2]:days[0];
|
||||
result=full=`${year+'-'+month+'-'+day}`;
|
||||
obj={
|
||||
year,
|
||||
month,
|
||||
day
|
||||
}
|
||||
break;
|
||||
case "hour":
|
||||
pickVal=disabledAfter?[
|
||||
dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0,
|
||||
dVal[1]&&months.indexOf(dVal[1])!=-1?months.indexOf(dVal[1]):0,
|
||||
dVal[2]&&days.indexOf(dVal[2])!=-1?days.indexOf(dVal[2]):0,
|
||||
dVal[3]&&hours.indexOf(dVal[3])!=-1?hours.indexOf(dVal[3]):0
|
||||
]:(curFlag?[
|
||||
years.indexOf(curYear+''),
|
||||
months.indexOf(this.formatNum(curMonth)),
|
||||
days.indexOf(this.formatNum(curDay)),
|
||||
hours.indexOf(this.formatNum(curHour)),
|
||||
]:[
|
||||
dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0,
|
||||
dVal[1]&&months.indexOf(dVal[1])!=-1?months.indexOf(dVal[1]):0,
|
||||
dVal[2]&&days.indexOf(dVal[2])!=-1?days.indexOf(dVal[2]):0,
|
||||
dVal[3]&&hours.indexOf(dVal[3])!=-1?hours.indexOf(dVal[3]):0
|
||||
]);
|
||||
range={years,months,days,hours};
|
||||
year=dVal[0]?dVal[0]:years[0];
|
||||
month=dVal[1]?dVal[1]:months[0];
|
||||
day=dVal[2]?dVal[2]:days[0];
|
||||
hour=dVal[3]?dVal[3]:hours[0];
|
||||
result=`${year+'-'+month+'-'+day+' '+hour}`;
|
||||
full=`${year+'-'+month+'-'+day+' '+hour+':00:00'}`;
|
||||
obj={
|
||||
year,
|
||||
month,
|
||||
day,
|
||||
hour
|
||||
}
|
||||
break;
|
||||
case "minute":
|
||||
pickVal=disabledAfter?[
|
||||
dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0,
|
||||
dVal[1]&&months.indexOf(dVal[1])!=-1?months.indexOf(dVal[1]):0,
|
||||
dVal[2]&&days.indexOf(dVal[2])!=-1?days.indexOf(dVal[2]):0,
|
||||
dVal[3]&&hours.indexOf(dVal[3])!=-1?hours.indexOf(dVal[3]):0,
|
||||
dVal[4]&&minutes.indexOf(dVal[4])!=-1?minutes.indexOf(dVal[4]):0
|
||||
]:(curFlag?[
|
||||
years.indexOf(curYear+''),
|
||||
months.indexOf(this.formatNum(curMonth)),
|
||||
days.indexOf(this.formatNum(curDay)),
|
||||
hours.indexOf(this.formatNum(curHour)),
|
||||
minutes.indexOf(this.formatNum(curMinute)),
|
||||
]:[
|
||||
dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0,
|
||||
dVal[1]&&months.indexOf(dVal[1])!=-1?months.indexOf(dVal[1]):0,
|
||||
dVal[2]&&days.indexOf(dVal[2])!=-1?days.indexOf(dVal[2]):0,
|
||||
dVal[3]&&hours.indexOf(dVal[3])!=-1?hours.indexOf(dVal[3]):0,
|
||||
dVal[4]&&minutes.indexOf(dVal[4])!=-1?minutes.indexOf(dVal[4]):0
|
||||
]);
|
||||
range={years,months,days,hours,minutes};
|
||||
year=dVal[0]?dVal[0]:years[0];
|
||||
month=dVal[1]?dVal[1]:months[0];
|
||||
day=dVal[2]?dVal[2]:days[0];
|
||||
hour=dVal[3]?dVal[3]:hours[0];
|
||||
minute=dVal[4]?dVal[4]:minutes[0];
|
||||
full=`${year+'-'+month+'-'+day+' '+hour+':'+minute+':00'}`;
|
||||
result=`${year+'-'+month+'-'+day+' '+hour+':'+minute}`;
|
||||
obj={
|
||||
year,
|
||||
month,
|
||||
day,
|
||||
hour,
|
||||
minute
|
||||
}
|
||||
break;
|
||||
case "second":
|
||||
pickVal=disabledAfter?[
|
||||
dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0,
|
||||
dVal[1]&&months.indexOf(dVal[1])!=-1?months.indexOf(dVal[1]):0,
|
||||
dVal[2]&&days.indexOf(dVal[2])!=-1?days.indexOf(dVal[2]):0,
|
||||
dVal[3]&&hours.indexOf(dVal[3])!=-1?hours.indexOf(dVal[3]):0,
|
||||
dVal[4]&&minutes.indexOf(dVal[4])!=-1?minutes.indexOf(dVal[4]):0,
|
||||
dVal[5]&&seconds.indexOf(dVal[5])!=-1?seconds.indexOf(dVal[5]):0
|
||||
]:(curFlag?[
|
||||
years.indexOf(curYear+''),
|
||||
months.indexOf(this.formatNum(curMonth)),
|
||||
days.indexOf(this.formatNum(curDay)),
|
||||
hours.indexOf(this.formatNum(curHour)),
|
||||
minutes.indexOf(this.formatNum(curMinute)),
|
||||
seconds.indexOf(this.formatNum(curSecond)),
|
||||
]:[
|
||||
dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0,
|
||||
dVal[1]&&months.indexOf(dVal[1])!=-1?months.indexOf(dVal[1]):0,
|
||||
dVal[2]&&days.indexOf(dVal[2])!=-1?days.indexOf(dVal[2]):0,
|
||||
dVal[3]&&hours.indexOf(dVal[3])!=-1?hours.indexOf(dVal[3]):0,
|
||||
dVal[4]&&minutes.indexOf(dVal[4])!=-1?minutes.indexOf(dVal[4]):0,
|
||||
dVal[5]&&seconds.indexOf(dVal[5])!=-1?seconds.indexOf(dVal[5]):0
|
||||
]);
|
||||
range={years,months,days,hours,minutes,seconds};
|
||||
year=dVal[0]?dVal[0]:years[0];
|
||||
month=dVal[1]?dVal[1]:months[0];
|
||||
day=dVal[2]?dVal[2]:days[0];
|
||||
hour=dVal[3]?dVal[3]:hours[0];
|
||||
minute=dVal[4]?dVal[4]:minutes[0];
|
||||
second=dVal[5]?dVal[5]:seconds[0];
|
||||
result=full=`${year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second}`;
|
||||
obj={
|
||||
year,
|
||||
month,
|
||||
day,
|
||||
hour,
|
||||
minute,
|
||||
second
|
||||
}
|
||||
break;
|
||||
default:
|
||||
range={years,months,days};
|
||||
break;
|
||||
}
|
||||
this.range=range;
|
||||
this.checkObj=obj;
|
||||
this.$emit("change",{
|
||||
result:result,
|
||||
value:full,
|
||||
obj:obj
|
||||
});
|
||||
this.$nextTick(()=>{
|
||||
this.pickVal=pickVal;
|
||||
})
|
||||
},
|
||||
handlerChange(e){
|
||||
let arr=[...e.detail.value];
|
||||
let data=this.range;
|
||||
let year="",month="",day="",hour="",minute="",second="";
|
||||
let result="",full="",obj={};
|
||||
let months=null,days=null,hours=null,minutes=null,seconds=null;
|
||||
let disabledAfter=this.disabledAfter;
|
||||
let leapYear=false,resetData={};
|
||||
year=(arr[0]||arr[0]==0)?data.years[arr[0]]||data.years[data.years.length-1]:"";
|
||||
month=(arr[1]||arr[1]==0)?data.months[arr[1]]||data.months[data.months.length-1]:"";
|
||||
day=(arr[2]||arr[2]==0)?data.days[arr[2]]||data.days[data.days.length-1]:"";
|
||||
hour=(arr[3]||arr[3]==0)?data.hours[arr[3]]||data.hours[data.hours.length-1]:"";
|
||||
minute=(arr[4]||arr[4]==0)?data.minutes[arr[4]]||data.minutes[data.minutes.length-1]:"";
|
||||
second=(arr[5]||arr[5]==0)?data.seconds[arr[5]]||data.seconds[data.seconds.length-1]:"";
|
||||
resetData=this.resetData(year,month,day,hour,minute);//重新拉取当前日期数据;
|
||||
leapYear=this.isLeapYear(year);//判断是否为闰年;
|
||||
switch(this.fields){
|
||||
case "year":
|
||||
result=full=`${year}`;
|
||||
obj={
|
||||
year
|
||||
};
|
||||
break;
|
||||
case "month":
|
||||
result=full=`${year+'-'+month}`;
|
||||
if(this.disabledAfter)months=resetData.months;
|
||||
if(months)this.range.months=months;
|
||||
obj={
|
||||
year,
|
||||
month
|
||||
}
|
||||
break;
|
||||
case "day":
|
||||
result=full=`${year+'-'+month+'-'+day}`;
|
||||
if(this.disabledAfter){
|
||||
months=resetData.months;
|
||||
days=resetData.days;
|
||||
}else{
|
||||
if(leapYear||(month!=this.checkObj.month)||month==2){
|
||||
days=resetData.days;
|
||||
}
|
||||
}
|
||||
if(months)this.range.months=months;
|
||||
if(days)this.range.days=days;
|
||||
obj={
|
||||
year,
|
||||
month,
|
||||
day
|
||||
}
|
||||
break;
|
||||
case "hour":
|
||||
result=`${year+'-'+month+'-'+day+' '+hour}`;
|
||||
full=`${year+'-'+month+'-'+day+' '+hour+':00:00'}`;
|
||||
if(this.disabledAfter){
|
||||
months=resetData.months;
|
||||
days=resetData.days;
|
||||
hours=resetData.hours;
|
||||
}else{
|
||||
if(leapYear||(month!=this.checkObj.month)||month==2){
|
||||
days=resetData.days;
|
||||
}
|
||||
}
|
||||
if(months)this.range.months=months;
|
||||
if(days)this.range.days=days;
|
||||
if(hours)this.range.hours=hours;
|
||||
obj={
|
||||
year,
|
||||
month,
|
||||
day,
|
||||
hour
|
||||
}
|
||||
break;
|
||||
case "minute":
|
||||
full=`${year+'-'+month+'-'+day+' '+hour+':'+minute+':00'}`;
|
||||
result=`${year+'-'+month+'-'+day+' '+hour+':'+minute}`;
|
||||
if(this.disabledAfter){
|
||||
months=resetData.months;
|
||||
days=resetData.days;
|
||||
hours=resetData.hours;
|
||||
minutes=resetData.minutes;
|
||||
}else{
|
||||
if(leapYear||(month!=this.checkObj.month)||month==2){
|
||||
days=resetData.days;
|
||||
}
|
||||
}
|
||||
if(months)this.range.months=months;
|
||||
if(days)this.range.days=days;
|
||||
if(hours)this.range.hours=hours;
|
||||
if(minutes)this.range.minutes=minutes;
|
||||
obj={
|
||||
year,
|
||||
month,
|
||||
day,
|
||||
hour,
|
||||
minute
|
||||
};
|
||||
break;
|
||||
case "second":
|
||||
result=full=`${year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second}`;
|
||||
if(this.disabledAfter){
|
||||
months=resetData.months;
|
||||
days=resetData.days;
|
||||
hours=resetData.hours;
|
||||
minutes=resetData.minutes;
|
||||
//seconds=resetData.seconds;
|
||||
}else{
|
||||
if(leapYear||(month!=this.checkObj.month)||month==2){
|
||||
days=resetData.days;
|
||||
}
|
||||
}
|
||||
if(months)this.range.months=months;
|
||||
if(days)this.range.days=days;
|
||||
if(hours)this.range.hours=hours;
|
||||
if(minutes)this.range.minutes=minutes;
|
||||
//if(seconds)this.range.seconds=seconds;
|
||||
obj={
|
||||
year,
|
||||
month,
|
||||
day,
|
||||
hour,
|
||||
minute,
|
||||
second
|
||||
}
|
||||
break;
|
||||
}
|
||||
this.checkObj=obj;
|
||||
this.$emit("change",{
|
||||
result:result,
|
||||
value:full,
|
||||
obj:obj
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "./w-picker.css";
|
||||
</style>
|
||||
Reference in New Issue
Block a user