1172 lines
36 KiB
Vue
1172 lines
36 KiB
Vue
<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>
|