395 lines
12 KiB
Vue
395 lines
12 KiB
Vue
<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.fyears" :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.fmonths" :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.fdays" :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.tyears" :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.tmonths" :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.tdays" :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,
|
||
},
|
||
startYear: {
|
||
type: [String, Number],
|
||
default: 1970,
|
||
},
|
||
endYear: {
|
||
type: [String, Number],
|
||
default: new Date().getFullYear(),
|
||
},
|
||
},
|
||
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{4}-\d{2}-\d{2}$/,
|
||
example = '2020-04-03'
|
||
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(fmonth, fday, tyear, tmonth) {
|
||
let range = this.range
|
||
let tmonths = [],
|
||
tdays = []
|
||
let yearFlag = tyear != range.tyears[0]
|
||
let monthFlag = tyear != range.tyears[0] || tmonth != range.tmonths[0]
|
||
let ttotal = new Date(tyear, tmonth, 0).getDate()
|
||
for (let i = yearFlag ? 1 : fmonth * 1; i <= 12; i++) {
|
||
tmonths.push(this.formatNum(i))
|
||
}
|
||
for (let i = monthFlag ? 1 : fday * 1; i <= ttotal; i++) {
|
||
tdays.push(this.formatNum(i))
|
||
}
|
||
return {
|
||
tmonths,
|
||
tdays,
|
||
}
|
||
},
|
||
resetData(fyear, fmonth, fday, tyear, tmonth) {
|
||
let fyears = [],
|
||
fmonths = [],
|
||
fdays = [],
|
||
tyears = [],
|
||
tmonths = [],
|
||
tdays = []
|
||
let startYear = this.startYear
|
||
let endYear = this.endYear
|
||
let ftotal = new Date(fyear, fmonth, 0).getDate()
|
||
let ttotal = new Date(tyear, tmonth, 0).getDate()
|
||
for (let i = startYear * 1; i <= endYear; i++) {
|
||
fyears.push(this.formatNum(i))
|
||
}
|
||
for (let i = 1; i <= 12; i++) {
|
||
fmonths.push(this.formatNum(i))
|
||
}
|
||
for (let i = 1; i <= ftotal; i++) {
|
||
fdays.push(this.formatNum(i))
|
||
}
|
||
for (let i = fyear * 1; i <= endYear; i++) {
|
||
tyears.push(this.formatNum(i))
|
||
}
|
||
for (let i = fmonth * 1; i <= 12; i++) {
|
||
tmonths.push(this.formatNum(i))
|
||
}
|
||
for (let i = fday * 1; i <= ttotal; i++) {
|
||
tdays.push(this.formatNum(i))
|
||
}
|
||
return {
|
||
fyears,
|
||
fmonths,
|
||
fdays,
|
||
tyears,
|
||
tmonths,
|
||
tdays,
|
||
}
|
||
},
|
||
getData(dVal) {
|
||
let start = this.startYear * 1
|
||
let end = this.endYear * 1
|
||
let value = dVal
|
||
let flag = this.current
|
||
let aToday = new Date()
|
||
let tYear,
|
||
tMonth,
|
||
tDay,
|
||
tHours,
|
||
tMinutes,
|
||
tSeconds,
|
||
pickVal = []
|
||
let initstartDate = new Date(start.toString())
|
||
let endDate = new Date(end.toString())
|
||
if (start > end) {
|
||
initstartDate = new Date(end.toString())
|
||
endDate = new Date(start.toString())
|
||
}
|
||
let startYear = initstartDate.getFullYear()
|
||
let startMonth = initstartDate.getMonth() + 1
|
||
let endYear = endDate.getFullYear()
|
||
let fyears = [],
|
||
fmonths = [],
|
||
fdays = [],
|
||
tyears = [],
|
||
tmonths = [],
|
||
tdays = [],
|
||
returnArr = [],
|
||
startDVal = [],
|
||
endDVal = []
|
||
let curMonth = flag ? value[1] * 1 : startDVal[1] * 1 + 1
|
||
let curMonth1 = flag ? value[5][1] * 1 : value[5] * 1 + 1
|
||
let totalDays = new Date(value[0], value[1], 0).getDate()
|
||
let totalDays1 = new Date(value[4], value[5], 0).getDate()
|
||
for (let s = startYear; s <= endYear; s++) {
|
||
fyears.push(this.formatNum(s))
|
||
}
|
||
for (let m = 1; m <= 12; m++) {
|
||
fmonths.push(this.formatNum(m))
|
||
}
|
||
for (let d = 1; d <= totalDays; d++) {
|
||
fdays.push(this.formatNum(d))
|
||
}
|
||
for (let s = value[0] * 1; s <= endYear; s++) {
|
||
tyears.push(this.formatNum(s))
|
||
}
|
||
|
||
if (value[4] * 1 > value[0] * 1) {
|
||
for (let m = 1; m <= 12; m++) {
|
||
tmonths.push(this.formatNum(m))
|
||
}
|
||
for (let d = 1; d <= totalDays1; d++) {
|
||
tdays.push(this.formatNum(d))
|
||
}
|
||
} else {
|
||
for (let m = value[1] * 1; m <= 12; m++) {
|
||
tmonths.push(this.formatNum(m))
|
||
}
|
||
for (let d = value[2] * 1; d <= totalDays1; d++) {
|
||
tdays.push(this.formatNum(d))
|
||
}
|
||
}
|
||
|
||
pickVal = [
|
||
fyears.indexOf(value[0]) == -1 ? 0 : fyears.indexOf(value[0]),
|
||
fmonths.indexOf(value[1]) == -1 ? 0 : fmonths.indexOf(value[1]),
|
||
fdays.indexOf(value[2]) == -1 ? 0 : fdays.indexOf(value[2]),
|
||
0,
|
||
tyears.indexOf(value[4]) == -1 ? 0 : tyears.indexOf(value[4]),
|
||
tmonths.indexOf(value[5]) == -1 ? 0 : tmonths.indexOf(value[5]),
|
||
tdays.indexOf(value[6]) == -1 ? 0 : tdays.indexOf(value[6]),
|
||
]
|
||
return {
|
||
fyears,
|
||
fmonths,
|
||
fdays,
|
||
tyears,
|
||
tmonths,
|
||
tdays,
|
||
pickVal,
|
||
}
|
||
},
|
||
getDval() {
|
||
let value = this.value
|
||
let fields = this.fields
|
||
let dVal = null
|
||
let aDate = new Date()
|
||
let fyear = this.formatNum(aDate.getFullYear())
|
||
let fmonth = this.formatNum(aDate.getMonth() + 1)
|
||
let fday = this.formatNum(aDate.getDate())
|
||
let tyear = this.formatNum(aDate.getFullYear())
|
||
let tmonth = this.formatNum(aDate.getMonth() + 1)
|
||
let tday = this.formatNum(aDate.getDate())
|
||
if (value && value.length > 0) {
|
||
let flag = this.checkValue(value)
|
||
if (!flag) {
|
||
dVal = [fyear, fmonth, fday, '-', tyear, tmonth, tday]
|
||
} else {
|
||
dVal = [...value[0].split('-'), '-', ...value[1].split('-')]
|
||
}
|
||
} else {
|
||
dVal = [fyear, fmonth, fday, '-', tyear, tmonth, tday]
|
||
}
|
||
return dVal
|
||
},
|
||
initData() {
|
||
let range = [],
|
||
pickVal = []
|
||
let result = '',
|
||
full = '',
|
||
obj = {}
|
||
let dVal = this.getDval()
|
||
let dateData = this.getData(dVal)
|
||
let fyears = [],
|
||
fmonths = [],
|
||
fdays = [],
|
||
tyears = [],
|
||
tmonths = [],
|
||
tdays = []
|
||
let fyear, fmonth, fday, tyear, tmonth, tday
|
||
pickVal = dateData.pickVal
|
||
fyears = dateData.fyears
|
||
fmonths = dateData.fmonths
|
||
fdays = dateData.fdays
|
||
tyears = dateData.tyears
|
||
tmonths = dateData.tmonths
|
||
tdays = dateData.tdays
|
||
range = {
|
||
fyears,
|
||
fmonths,
|
||
fdays,
|
||
tyears,
|
||
tmonths,
|
||
tdays,
|
||
}
|
||
fyear = range.fyears[pickVal[0]]
|
||
fmonth = range.fmonths[pickVal[1]]
|
||
fday = range.fdays[pickVal[2]]
|
||
tyear = range.tyears[pickVal[4]]
|
||
tmonth = range.tmonths[pickVal[5]]
|
||
tday = range.tdays[pickVal[6]]
|
||
obj = {
|
||
fyear,
|
||
fmonth,
|
||
fday,
|
||
tyear,
|
||
tmonth,
|
||
tday,
|
||
}
|
||
result = full = `${fyear + '-' + fmonth + '-' + fday + '至' + tyear + '-' + tmonth + '-' + tday}`
|
||
this.range = range
|
||
this.checkObj = obj
|
||
this.$nextTick(() => {
|
||
this.pickVal = pickVal
|
||
})
|
||
this.$emit('change', {
|
||
result: result,
|
||
value: full,
|
||
obj: obj,
|
||
})
|
||
},
|
||
handlerChange(e) {
|
||
let arr = [...e.detail.value]
|
||
let result = '',
|
||
full = '',
|
||
obj = {}
|
||
let year = '',
|
||
month = '',
|
||
day = '',
|
||
hour = '',
|
||
minute = '',
|
||
second = '',
|
||
note = [],
|
||
province,
|
||
city,
|
||
area
|
||
let checkObj = this.checkObj
|
||
let days = [],
|
||
months = [],
|
||
endYears = [],
|
||
endMonths = [],
|
||
endDays = [],
|
||
startDays = []
|
||
let mode = this.mode
|
||
let col1, col2, col3, d, a, h, m
|
||
let xDate = new Date().getTime()
|
||
let range = this.range
|
||
let fyear = range.fyears[arr[0]] || range.fyears[range.fyears.length - 1]
|
||
let fmonth = range.fmonths[arr[1]] || range.fmonths[range.fmonths.length - 1]
|
||
let fday = range.fdays[arr[2]] || range.fdays[range.fdays.length - 1]
|
||
let tyear = range.tyears[arr[4]] || range.tyears[range.tyears.length - 1]
|
||
let tmonth = range.tmonths[arr[5]] || range.tmonths[range.tmonths.length - 1]
|
||
let tday = range.tdays[arr[6]] || range.tdays[range.tdays.length - 1]
|
||
let resetData = this.resetData(fyear, fmonth, fday, tyear, tmonth)
|
||
if (fyear != checkObj.fyear || fmonth != checkObj.fmonth || fday != checkObj.fday) {
|
||
arr[4] = 0
|
||
arr[5] = 0
|
||
arr[6] = 0
|
||
range.tyears = resetData.tyears
|
||
range.tmonths = resetData.tmonths
|
||
range.tdays = resetData.tdays
|
||
tyear = range.tyears[0]
|
||
checkObj.tyears = range.tyears[0]
|
||
tmonth = range.tmonths[0]
|
||
checkObj.tmonths = range.tmonths[0]
|
||
tday = range.tdays[0]
|
||
checkObj.tdays = range.tdays[0]
|
||
}
|
||
if (fyear != checkObj.fyear || fmonth != checkObj.fmonth) {
|
||
range.fdays = resetData.fdays
|
||
}
|
||
if (tyear != checkObj.tyear) {
|
||
arr[5] = 0
|
||
arr[6] = 0
|
||
let toData = this.resetToData(fmonth, fday, tyear, tmonth)
|
||
range.tmonths = toData.tmonths
|
||
range.tdays = toData.tdays
|
||
tmonth = range.tmonths[0]
|
||
checkObj.tmonths = range.tmonths[0]
|
||
tday = range.tdays[0]
|
||
checkObj.tdays = range.tdays[0]
|
||
}
|
||
if (tmonth != checkObj.tmonth) {
|
||
arr[6] = 0
|
||
let toData = this.resetToData(fmonth, fday, tyear, tmonth)
|
||
range.tdays = toData.tdays
|
||
tday = range.tdays[0]
|
||
checkObj.tdays = range.tdays[0]
|
||
}
|
||
result = full = `${fyear + '-' + fmonth + '-' + fday + '至' + tyear + '-' + tmonth + '-' + tday}`
|
||
obj = {
|
||
fyear,
|
||
fmonth,
|
||
fday,
|
||
tyear,
|
||
tmonth,
|
||
tday,
|
||
}
|
||
this.checkObj = obj
|
||
this.$nextTick(() => {
|
||
this.pickVal = arr
|
||
})
|
||
this.$emit('change', {
|
||
result: result,
|
||
value: full,
|
||
obj: obj,
|
||
})
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import './w-picker.css';
|
||
</style>
|