<template>
<view class="w-picker-view">
<view
style="
display: flex;
justify-content: space-around;
font-size: 18px;
font-weight: 700;
padding: 30upx 0;
border-bottom: 1rpx solid rgb(134 134 134);
border-top: 1rpx solid rgb(134 134 134);
color:#1936C9
"
>
<template v-if="fields == 'minute'">
<view>年份</view>
<view>月</view>
<view>日</view>
<view>时</view>
<view>分</view>
</template>
<template v-if="fields == 'day'">
<view>年份</view>
<view>月</view>
<view>日</view>
</template>
</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"
},
// disabledMonth: {
// type: Number,
// default: 0,
// },
// disabledRange: {
// type: Array,
// default: ''
// },
disabledBefore: {
//是否禁用当前之前的日期
type: Boolean,
default: false
}
},
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 disabledRange = this.disabledRange
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 disabledBefore = this.disabledBefore;
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));
}
const index2 = days.findIndex(item => item === this.formatNum(curDay));
const electiveDays = days.slice(index2);
const index = months.findIndex(item => item === this.formatNum(curMonth));
const electiveMonths = months.slice(index);
// let electiveDays = days.filter(item => !disabledRange.includes(item))
days = this.disabledBefore
? year * 1 === curYear && month * 1 === curMonth
? electiveDays
: days
: days;
months = this.disabledBefore
? year * 1 === curYear
? electiveMonths
: months
: months;
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));
}
const index2 = days.findIndex(item => item === this.formatNum(curDay));
const electiveDays = days.slice(index2);
const index = months.findIndex(item => item === this.formatNum(curMonth));
const electiveMonths = months.slice(index);
days = this.disabledBefore
? year * 1 === curYear && month * 1 === curMonth
? electiveDays
: days
: days;
months = this.disabledBefore
? year * 1 === curYear
? electiveMonths
: months
: months;
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); //重新拉取当前日期数据;
month =
arr[1] || arr[1] == 0
? resetData.months[arr[1]] ||
resetData.months[resetData.months.length - 1]
: "";
day =
arr[2] || arr[2] == 0
? resetData.days[arr[2]] || resetData.days[resetData.days.length - 1]
: "";
resetData = this.resetData(year, month, day, hour, minute); //重新拉取当前日期数据;
month =
arr[1] || arr[1] == 0
? resetData.months[arr[1]] ||
resetData.months[resetData.months.length - 1]
: "";
day =
arr[2] || arr[2] == 0
? resetData.days[arr[2]] || resetData.days[resetData.days.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 (this.disabledBefore) 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 (this.disabledBefore) {
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 (this.disabledBefore) {
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 (this.disabledBefore) {
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>