<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.fhours" :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.fminutes" :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.fseconds" :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.thours" :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.tminutes" :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.tseconds" :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
|
},
|
startHour:{
|
type:[String,Number],
|
default:1970
|
},
|
endHour:{
|
type:[String,Number],
|
default:new Date().getFullhour()
|
}
|
},
|
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{2}:\d{2}:\d{2}$/,example="18:00:05";
|
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(fminute,fseconds,thour,tminute){
|
let range=this.range;
|
let tminutes=[],tseconds=[];
|
let hourFlag=thour!=range.thours[0];
|
let minuteFlag=thour!=range.thours[0]||tminute!=range.tminutes[0];
|
let ttotal=new Date(thour,tminute,0).getDate();
|
for(let i=hourFlag?1:fminute*1;i<=12;i++){
|
tminutes.push(this.formatNum(i))
|
}
|
for(let i=minuteFlag?1:fseconds*1;i<=ttotal;i++){
|
tseconds.push(this.formatNum(i))
|
}
|
|
return{
|
tminutes,
|
tseconds
|
}
|
},
|
resetData(fhour,fminute,fseconds,thour,tminute){
|
let fhours=[],fminutes=[],fseconds=[],thours=[],tminutes=[],tseconds=[];
|
let startHour=this.startHour;
|
let endHour=this.endHour;
|
let ftotal=new Date(fhour,fminute,0).getDate();
|
let ttotal=new Date(thour,tminute,0).getDate();
|
|
for(let hour=0;hour<24;hour++){
|
fhours.push(this.formatNum(hour));
|
}
|
for(let minute=0;minute<60;minute++){
|
fminutes.push(this.formatNum(minute));
|
}
|
for(let second=0;second<60;second++){
|
fseconds.push(this.formatNum(second));
|
}
|
for(let hour=0;hour<24;hour++){
|
thours.push(this.formatNum(hour));
|
}
|
for(let minute=0;minute<60;minute++){
|
tminutes.push(this.formatNum(minute));
|
}
|
for(let second=0;second<60;second++){
|
tseconds.push(this.formatNum(second));
|
}
|
return {
|
fhours,
|
fminutes,
|
fseconds,
|
thours,
|
tminutes,
|
tseconds
|
}
|
},
|
getData(dVal){
|
let value=dVal;
|
let thour,tminute,tseconds,tHours,tMinutes,tSeconds,pickVal=[];
|
for(let hour=0;hour<24;hour++){
|
hours.push(this.formatNum(hour));
|
}
|
for(let minute=0;minute<60;minute++){
|
minutes.push(this.formatNum(minute));
|
}
|
for(let second=0;second<60;second++){
|
seconds.push(this.formatNum(second));
|
}
|
|
for(let hour=0;hour<24;hour++){
|
hours.push(this.formatNum(hour));
|
}
|
for(let minute=0;minute<60;minute++){
|
minutes.push(this.formatNum(minute));
|
}
|
for(let second=0;second<60;second++){
|
seconds.push(this.formatNum(second));
|
}
|
|
pickVal=[
|
fhours.indexOf(value[0])==-1?0:fhours.indexOf(value[0]),
|
fminutes.indexOf(value[1])==-1?0:fminutes.indexOf(value[1]),
|
fseconds.indexOf(value[2])==-1?0:fseconds.indexOf(value[2]),
|
0,
|
thours.indexOf(value[4])==-1?0:thours.indexOf(value[4]),
|
tminutes.indexOf(value[5])==-1?0:tminutes.indexOf(value[5]),
|
tseconds.indexOf(value[6])==-1?0:tseconds.indexOf(value[6])
|
];
|
return {
|
fhours,
|
fminutes,
|
fseconds,
|
thours,
|
tminutes,
|
tseconds,
|
pickVal
|
}
|
},
|
getDval(){
|
let value=this.value;
|
let fields=this.fields;
|
let dVal=null;
|
let aDate=new Date();
|
let fhour=this.formatNum(aDate.getFullhour());
|
let fminute=this.formatNum(aDate.getminute()+1);
|
let fseconds=this.formatNum(aDate.getDate());
|
let thour=this.formatNum(aDate.getFullhour());
|
let tminute=this.formatNum(aDate.getminute()+1);
|
let tseconds=this.formatNum(aDate.getDate());
|
if(value&&value.length>0){
|
let flag=this.checkValue(value);
|
if(!flag){
|
dVal=[fhour,fminute,fseconds,"-",thour,tminute,tseconds]
|
}else{
|
dVal=[...value[0].split("-"),"-",...value[1].split("-")];
|
}
|
}else{
|
dVal=[fhour,fminute,fseconds,"-",thour,tminute,tseconds]
|
}
|
return dVal;
|
},
|
initData(){
|
let range=[],pickVal=[];
|
let result="",full="",obj={};
|
let dVal=this.getDval();
|
let dateData=this.getData(dVal);
|
let fhours=[],fminutes=[],fseconds=[],thours=[],tminutes=[],tseconds=[];
|
let fhour,fminute,fseconds,thour,tminute,tseconds;
|
pickVal=dateData.pickVal;
|
fhours=dateData.fhours;
|
fminutes=dateData.fminutes;
|
fseconds=dateData.fseconds;
|
thours=dateData.thours;
|
tminutes=dateData.tminutes;
|
tseconds=dateData.tseconds;
|
range={
|
fhours,
|
fminutes,
|
fseconds,
|
thours,
|
tminutes,
|
tseconds,
|
}
|
fhour=range.fhours[pickVal[0]];
|
fminute=range.fminutes[pickVal[1]];
|
fseconds=range.fseconds[pickVal[2]];
|
thour=range.thours[pickVal[4]];
|
tminute=range.tminutes[pickVal[5]];
|
tseconds=range.tseconds[pickVal[6]];
|
obj={
|
fhour,
|
fminute,
|
fseconds,
|
thour,
|
tminute,
|
tseconds
|
}
|
result=`${fhour+'-'+fminute+'-'+fseconds+'至'+thour+'-'+tminute+'-'+tseconds}`;
|
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 hour="",minute="",seconds="",hour="",minute="",second="",note=[],province,city,area;
|
let checkObj=this.checkObj;
|
let seconds=[],minutes=[],endHours=[],endminutes=[],endseconds=[],startseconds=[];
|
let mode=this.mode;
|
let col1,col2,col3,d,a,h,m;
|
let xDate=new Date().getTime();
|
let range=this.range;
|
let fhour=range.fhours[arr[0]]||range.fhours[range.fhours.length-1];
|
let fminute=range.fminutes[arr[1]]||range.fminutes[range.fminutes.length-1];
|
let fseconds=range.fseconds[arr[2]]||range.fseconds[range.fseconds.length-1];
|
let thour=range.thours[arr[4]]||range.thours[range.thours.length-1];
|
let tminute=range.tminutes[arr[5]]||range.tminutes[range.tminutes.length-1];
|
let tseconds=range.tseconds[arr[6]]||range.tseconds[range.tseconds.length-1];
|
let resetData=this.resetData(fhour,fminute,fseconds,thour,tminute);
|
if(fhour!=checkObj.fhour||fminute!=checkObj.fminute||fseconds!=checkObj.fseconds){
|
arr[4]=0;
|
arr[5]=0;
|
arr[6]=0;
|
range.thours=resetData.thours;
|
range.tminutes=resetData.tminutes;
|
range.tseconds=resetData.tseconds;
|
thour=range.thours[0];
|
checkObj.thours=range.thours[0];
|
tminute=range.tminutes[0];
|
checkObj.tminutes=range.tminutes[0];
|
tseconds=range.tseconds[0];
|
checkObj.tseconds=range.tseconds[0];
|
}
|
if(fhour!=checkObj.fhour||fminute!=checkObj.fminute){
|
range.fseconds=resetData.fseconds;
|
};
|
if(thour!=checkObj.thour){
|
arr[5]=0;
|
arr[6]=0;
|
let toData=this.resetToData(fminute,fseconds,thour,tminute);
|
range.tminutes=toData.tminutes;
|
range.tseconds=toData.tseconds;
|
tminute=range.tminutes[0];
|
checkObj.tminutes=range.tminutes[0];
|
tseconds=range.tseconds[0];
|
checkObj.tseconds=range.tseconds[0];
|
};
|
if(tminute!=checkObj.tminute){
|
arr[6]=0;
|
let toData=this.resetToData(fminute,fseconds,thour,tminute);
|
range.tseconds=toData.tseconds;
|
tseconds=range.tseconds[0];
|
checkObj.tseconds=range.tseconds[0];
|
};
|
result=`${fhour+'-'+fminute+'-'+fseconds+'至'+thour+'-'+tminute+'-'+tseconds}`;
|
obj={
|
fhour,fminute,fseconds,thour,tminute,tseconds
|
}
|
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>
|
