|
|
<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>
|