656 lines
17 KiB
Vue
656 lines
17 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<view :class="['date', type]" :style="{borderColor, opacity: disabled ? 0.6 : 1}" @tap="tapInput">
|
|||
|
|
<slot name="icon">
|
|||
|
|
<view v-if="showIcon" class="calendar" :style="{borderColor: iconColor}">
|
|||
|
|
<view class="calendar-top calendar-top-left" :style="{background: iconColor}" />
|
|||
|
|
<view class="calendar-top calendar-top-right" :style="{background: iconColor}" />
|
|||
|
|
<view class="calendar-line" :style="{background: iconColor}" />
|
|||
|
|
<view class="calendar-line calendar-line-bottom" :style="{background: iconColor}" />
|
|||
|
|
</view>
|
|||
|
|
</slot>
|
|||
|
|
<text class="date-text" :style="{color: date ? color : placeholderColor, fontSize}">
|
|||
|
|
{{ date || placeholder }}
|
|||
|
|
</text>
|
|||
|
|
<slot name="arrow">
|
|||
|
|
<view
|
|||
|
|
v-if="showArrow && (!showClear || showClear && !date)"
|
|||
|
|
class="arrow-icon"
|
|||
|
|
:style="{boxShadow: `-4rpx 4rpx 0 0rpx ${arrowColor} inset`}" />
|
|||
|
|
</slot>
|
|||
|
|
<view v-if="showClear && date" class="ir-clear" @click.stop="clear">
|
|||
|
|
<slot name="clear">
|
|||
|
|
<view class="ir-clear-icon" :style="{background: clearColor}">
|
|||
|
|
<view class="clear-line" :style="{background: clearColor}" />
|
|||
|
|
</view>
|
|||
|
|
</slot>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view v-if="visible" class="ir-mask" @tap="visible = false"></view>
|
|||
|
|
|
|||
|
|
<view v-if="visible" class="picker-con" :style="{background: pickerBg}">
|
|||
|
|
<view class="flex">
|
|||
|
|
<view @tap="visible = false">
|
|||
|
|
<slot name="cancel">
|
|||
|
|
<view class="ir-btn" :style="{color: cancelColor}">取消</view>
|
|||
|
|
</slot>
|
|||
|
|
</view>
|
|||
|
|
<view @tap="confirm">
|
|||
|
|
<slot name="confirm">
|
|||
|
|
<view class="ir-btn" :style="{color: confirmColor}">确认</view>
|
|||
|
|
</slot>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<picker-view
|
|||
|
|
class="picker-view"
|
|||
|
|
:indicator-style='indicatorStyle'
|
|||
|
|
:mask-style='maskStyle'
|
|||
|
|
:value="pickerVal"
|
|||
|
|
indicator-class="ir-datetime-picker"
|
|||
|
|
mask-class='ir-datetime-picker-mask'
|
|||
|
|
@change="bindChange"
|
|||
|
|
@touchmove="touchmove"
|
|||
|
|
@touchend="touchend">
|
|||
|
|
<picker-view-column>
|
|||
|
|
<view class="item"
|
|||
|
|
v-for="(item,index) in years"
|
|||
|
|
:style="[{color: index === pickerVal[0] ? activeColor : pickerColor}, itemStyle]"
|
|||
|
|
:key="index">{{item}}年</view>
|
|||
|
|
</picker-view-column>
|
|||
|
|
<picker-view-column>
|
|||
|
|
<view class="item"
|
|||
|
|
v-for="(item,index) in months"
|
|||
|
|
:style="[{color: index === pickerVal[1] ? activeColor : pickerColor}, itemStyle]"
|
|||
|
|
:key="index">{{item}}月</view>
|
|||
|
|
</picker-view-column>
|
|||
|
|
<picker-view-column>
|
|||
|
|
<view class="item"
|
|||
|
|
v-for="(item,index) in days"
|
|||
|
|
:key="index"
|
|||
|
|
:style="[{color: index === pickerVal[2] ? activeColor : pickerColor}, itemStyle]">{{item}}日</view>
|
|||
|
|
</picker-view-column>
|
|||
|
|
<picker-view-column>
|
|||
|
|
<view class="item"
|
|||
|
|
v-for="(item,index) in hours"
|
|||
|
|
:key="index"
|
|||
|
|
:style="[{color: index === pickerVal[3] ? activeColor : pickerColor}, itemStyle]">{{item}}时</view>
|
|||
|
|
</picker-view-column>
|
|||
|
|
<picker-view-column>
|
|||
|
|
<view class="item"
|
|||
|
|
v-for="(item,index) in minutes"
|
|||
|
|
:key="index"
|
|||
|
|
:style="[{color: index === pickerVal[4] ? activeColor : pickerColor}, itemStyle]">{{item}}分</view>
|
|||
|
|
</picker-view-column>
|
|||
|
|
</picker-view>
|
|||
|
|
<view v-if="showCover" class="cover"></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
name: "IrDateTimePicker",
|
|||
|
|
props: {
|
|||
|
|
start: {
|
|||
|
|
type: [String, Number],
|
|||
|
|
default: '2010/01/01 00:00'
|
|||
|
|
},
|
|||
|
|
end: {
|
|||
|
|
type: [String, Number],
|
|||
|
|
default: '2050/12/31 23:59'
|
|||
|
|
},
|
|||
|
|
value: {
|
|||
|
|
type: [String, Number],
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
disabled: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
type: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'border'
|
|||
|
|
},
|
|||
|
|
fontSize: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
color: {
|
|||
|
|
type: String,
|
|||
|
|
default: '#333'
|
|||
|
|
},
|
|||
|
|
borderColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: '#ddd'
|
|||
|
|
},
|
|||
|
|
showIcon: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
iconColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: '#555'
|
|||
|
|
},
|
|||
|
|
showArrow: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
arrowColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: '#999'
|
|||
|
|
},
|
|||
|
|
showClear: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
clearColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: '#999'
|
|||
|
|
},
|
|||
|
|
placeholder: {
|
|||
|
|
type: String,
|
|||
|
|
default: '请选择日期时间'
|
|||
|
|
},
|
|||
|
|
placeholderColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: '#999'
|
|||
|
|
},
|
|||
|
|
pickerBg: {
|
|||
|
|
type: String,
|
|||
|
|
default: '#fff',
|
|||
|
|
},
|
|||
|
|
cancelColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: '#666'
|
|||
|
|
},
|
|||
|
|
confirmColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: '#007AFF'
|
|||
|
|
},
|
|||
|
|
maskStyle: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
indicatorStyle: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'height: 50px;'
|
|||
|
|
},
|
|||
|
|
pickerColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
activeColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: '',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
const baseArr = ['', '']
|
|||
|
|
return {
|
|||
|
|
date: '',
|
|||
|
|
years: baseArr,
|
|||
|
|
months: baseArr,
|
|||
|
|
days: baseArr,
|
|||
|
|
hours: baseArr,
|
|||
|
|
minutes: baseArr,
|
|||
|
|
days28: [],
|
|||
|
|
pickerVal: [],
|
|||
|
|
visible: false,
|
|||
|
|
itemStyle: null,
|
|||
|
|
startObj: {
|
|||
|
|
months: [],
|
|||
|
|
days: []
|
|||
|
|
},
|
|||
|
|
endObj: {
|
|||
|
|
months: [],
|
|||
|
|
days: []
|
|||
|
|
},
|
|||
|
|
changeDisabled: false,
|
|||
|
|
moveFlag: false,
|
|||
|
|
showCover: false,
|
|||
|
|
hasChange: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
start() {
|
|||
|
|
this.setStartEnd()
|
|||
|
|
const date = this.value ? this.value : new Date()
|
|||
|
|
this.initCurr(date)
|
|||
|
|
},
|
|||
|
|
end() {
|
|||
|
|
this.setStartEnd()
|
|||
|
|
const date = this.value ? this.value : new Date()
|
|||
|
|
this.initCurr(date)
|
|||
|
|
},
|
|||
|
|
value(val) {
|
|||
|
|
const date = val ? val : new Date()
|
|||
|
|
this.initCurr(date)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.days28 = this.setArray(1, 28)
|
|||
|
|
if (this.activeColor || this.pickerColor) {
|
|||
|
|
this.itemStyle = {
|
|||
|
|
height: '50px',
|
|||
|
|
lineHeight: '50px'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.setStartEnd()
|
|||
|
|
if (this.value) {
|
|||
|
|
const {y, m, d, h, minu} = this.trimDate(this.value)
|
|||
|
|
const trimN = this.trimNum
|
|||
|
|
this.date = `${y}-${trimN(m)}-${trimN(d)} ${trimN(h)}:${trimN(minu)}`
|
|||
|
|
}
|
|||
|
|
const date = this.value ? this.value : new Date()
|
|||
|
|
this.initCurr(date)
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 点击显示框
|
|||
|
|
tapInput() {
|
|||
|
|
if (!this.disabled) {
|
|||
|
|
this.visible = !this.visible
|
|||
|
|
// #ifdef MP-BAIDU
|
|||
|
|
if (this.visible) {
|
|||
|
|
const val = this.pickerVal
|
|||
|
|
this.pickerVal = [-5, -5, -5, -5, -5]
|
|||
|
|
setTimeout(_ => {
|
|||
|
|
this.pickerVal = val
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 设置一个是否是touchmove的flag
|
|||
|
|
touchmove() {
|
|||
|
|
this.moveFlag = true
|
|||
|
|
},
|
|||
|
|
touchend() {
|
|||
|
|
// touchend时，如果有move，则显示遮罩，以防多次滑动
|
|||
|
|
if (this.moveFlag) {
|
|||
|
|
this.showCover = true
|
|||
|
|
this.moveFlag = false
|
|||
|
|
}
|
|||
|
|
// move没有触发change事件，则隐藏遮罩
|
|||
|
|
setTimeout(_ => {
|
|||
|
|
if (!this.hasChange) {
|
|||
|
|
this.showCover = false
|
|||
|
|
}
|
|||
|
|
}, 200)
|
|||
|
|
},
|
|||
|
|
// 当滚动选择
|
|||
|
|
bindChange: function (e) {
|
|||
|
|
if (this.changeDisabled) return
|
|||
|
|
|
|||
|
|
this.changeDisabled = true
|
|||
|
|
const prev = this.pickerVal
|
|||
|
|
const val = e.detail.value
|
|||
|
|
const y = this.years[val[0]] ? this.years[val[0]] : this.years[this.years.length - 1]
|
|||
|
|
const m = this.months[val[1]] ? this.months[val[1]] : this.months[this.months.length - 1]
|
|||
|
|
const d = this.days[val[2]] ? this.days[val[2]] : this.days[this.days.length - 1]
|
|||
|
|
const h = this.hours[val[3]] >= 0 ? this.hours[val[3]] : this.hours[this.hours.length - 1]
|
|||
|
|
const minu = this.minutes[val[4]] >= 0 ? this.minutes[val[4]] : this.minutes[this.minutes.length - 1]
|
|||
|
|
|
|||
|
|
const date = `${y}/${m}/${d} ${h}:${minu}`
|
|||
|
|
if (prev[1] != val[1]) {
|
|||
|
|
this.initCurr(date, m, d)
|
|||
|
|
} else {
|
|||
|
|
this.initCurr(date)
|
|||
|
|
}
|
|||
|
|
this.pickerVal = val
|
|||
|
|
},
|
|||
|
|
// 点击确定
|
|||
|
|
confirm() {
|
|||
|
|
const val = this.pickerVal
|
|||
|
|
const trimN = this.trimNum
|
|||
|
|
const d = `${this.years[val[0]]}-${trimN(this.months[val[1]])}-${trimN(this.days[val[2]])}`
|
|||
|
|
const t = `${trimN(this.hours[val[3]])}:${trimN(this.minutes[val[4]])}`
|
|||
|
|
const date = `${d} ${t}`
|
|||
|
|
this.date = date
|
|||
|
|
this.$emit('change', date)
|
|||
|
|
this.visible = false
|
|||
|
|
},
|
|||
|
|
clear() {
|
|||
|
|
this.date = ''
|
|||
|
|
this.$emit('change', '')
|
|||
|
|
},
|
|||
|
|
// 根据年月,设置日期(不同月份，日期不同)
|
|||
|
|
setDays(year, month, start) {
|
|||
|
|
let newDays = []
|
|||
|
|
const monthReg = /^4|6|9|11$/
|
|||
|
|
let days = this.days28
|
|||
|
|
if (start) {
|
|||
|
|
days = this.setArray(start, 28)
|
|||
|
|
}
|
|||
|
|
if (monthReg.test(month)) {
|
|||
|
|
newDays = [...days, 29, 30]
|
|||
|
|
} else if (month === 2) {
|
|||
|
|
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
|
|||
|
|
newDays = [...days, 29]
|
|||
|
|
} else {
|
|||
|
|
newDays = days
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
newDays = [...days, 29, 30, 31]
|
|||
|
|
}
|
|||
|
|
return newDays
|
|||
|
|
},
|
|||
|
|
// 设置最大最小月日时分
|
|||
|
|
setStartEnd() {
|
|||
|
|
const {sy, ey, sm, em, sd, ed, sh, eh, sminu, eminu} = this.getSE()
|
|||
|
|
|
|||
|
|
this.years = this.setArray(sy, ey)
|
|||
|
|
// 设置最大最小月
|
|||
|
|
if (sy === ey) {
|
|||
|
|
this.startObj.months = this.endObj.months = this.setArray(sm, em)
|
|||
|
|
} else {
|
|||
|
|
this.startObj.months = this.setArray(sm, 12)
|
|||
|
|
this.endObj.months = this.setArray(1, em)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 设置最大最小日
|
|||
|
|
if (sy === ey && sm === em) {
|
|||
|
|
this.startObj.days = this.endObj.days = this.setArray(sd, ed)
|
|||
|
|
} else {
|
|||
|
|
this.startObj.days = this.setDays(sy, sm, sd)
|
|||
|
|
this.endObj.days = this.setArray(1, ed)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 设置最大最小时
|
|||
|
|
if (sy === ey && sm === em && sd === ed) {
|
|||
|
|
this.startObj.hours = this.endObj.hours = this.setArray(sh, eh)
|
|||
|
|
} else {
|
|||
|
|
this.startObj.hours = this.setArray(sh, 23)
|
|||
|
|
this.endObj.hours = this.setArray(0, eh)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 设置最大最小分钟
|
|||
|
|
if (sy === ey && sm === em && sd === ed && sh === eh) {
|
|||
|
|
this.startObj.minutes = this.endObj.minutes = this.setArray(sminu, eminu)
|
|||
|
|
} else {
|
|||
|
|
this.startObj.minutes = this.setArray(sminu, 59)
|
|||
|
|
this.endObj.minutes = this.setArray(0, eminu)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 初始化选中项
|
|||
|
|
initCurr(val, month, day) {
|
|||
|
|
// console.log(val)
|
|||
|
|
this.hasChange = true
|
|||
|
|
const {start, end, sy, ey, sm, em, sd, ed, sh, eh, sminu, eminu} = this.getSE()
|
|||
|
|
const {val: curr, y: cy, m: cm, d: cd, h: ch, minu: cminu} = this.trimDate(val, month, day)
|
|||
|
|
|
|||
|
|
let cyi = this.years.indexOf(cy)
|
|||
|
|
let cmi = 0
|
|||
|
|
let cdi = 0
|
|||
|
|
let chi = 0
|
|||
|
|
let cminui = 0
|
|||
|
|
|
|||
|
|
let endSIFlag = true // 是否在最后统一设置index
|
|||
|
|
|
|||
|
|
if (curr.getTime() >= end.getTime()) { // 值大于等于结束时间
|
|||
|
|
// console.log(11)
|
|||
|
|
this.months = this.endObj.months
|
|||
|
|
this.days = this.endObj.days
|
|||
|
|
this.hours = this.endObj.hours
|
|||
|
|
this.minutes = this.endObj.minutes
|
|||
|
|
cyi = this.years.length - 1
|
|||
|
|
cmi = this.months.length - 1
|
|||
|
|
cdi = this.days.length - 1
|
|||
|
|
chi = this.hours.length - 1
|
|||
|
|
cminui = this.minutes.length - 1
|
|||
|
|
endSIFlag = false
|
|||
|
|
} else if (curr.getTime() <= start.getTime()) { // 值小于等于开始时间
|
|||
|
|
// console.log(22)
|
|||
|
|
this.months = this.startObj.months
|
|||
|
|
this.days = this.startObj.days
|
|||
|
|
this.hours = this.startObj.hours
|
|||
|
|
this.minutes = this.startObj.minutes
|
|||
|
|
cyi = cmi = cdi = chi = cminui = 0
|
|||
|
|
endSIFlag = false
|
|||
|
|
} else if (cy === ey && cm === em && cd === ed && ch === eh) {
|
|||
|
|
// 值与结束时间年/月/日/时相同
|
|||
|
|
// console.log(222)
|
|||
|
|
this.months = this.endObj.months
|
|||
|
|
this.days = this.endObj.days
|
|||
|
|
this.hours = this.endObj.hours
|
|||
|
|
this.minutes = this.endObj.minutes
|
|||
|
|
} else if (cy === ey && cm === em && cd === ed) {
|
|||
|
|
// 值与结束时间年/月/日相同
|
|||
|
|
// console.log(111)
|
|||
|
|
this.months = this.endObj.months
|
|||
|
|
this.days = this.endObj.days
|
|||
|
|
this.hours = this.endObj.hours
|
|||
|
|
console.log(this.hours)
|
|||
|
|
this.minutes = this.setArray(0, 59)
|
|||
|
|
} else if (cy === ey && cm === em) { // 值与结束时间年、月相同
|
|||
|
|
// console.log(33)
|
|||
|
|
this.months = this.endObj.months
|
|||
|
|
this.days = this.endObj.days
|
|||
|
|
this.hours = this.setArray(0, 23)
|
|||
|
|
this.minutes = this.setArray(0, 59)
|
|||
|
|
} else if (cy === ey) { // 值与结束时间年份相同
|
|||
|
|
// console.log(44)
|
|||
|
|
this.months = this.endObj.months
|
|||
|
|
this.days = this.setDays(cy, cm)
|
|||
|
|
this.hours = this.setArray(0, 23)
|
|||
|
|
this.minutes = this.setArray(0, 59)
|
|||
|
|
} else if (cy === sy && cm === sm && cd === sd && ch === sh) {
|
|||
|
|
// 值与开始时间年/月/日/时相同
|
|||
|
|
// console.log(99)
|
|||
|
|
this.months = this.startObj.months
|
|||
|
|
this.days = this.startObj.days
|
|||
|
|
this.hours = this.startObj.hours
|
|||
|
|
this.minutes = this.startObj.minutes
|
|||
|
|
} else if (cy === sy && cm === sm && cd === sd) {
|
|||
|
|
// 值与开始时间年/月/日相同
|
|||
|
|
// console.log(88)
|
|||
|
|
this.months = this.startObj.months
|
|||
|
|
this.days = this.startObj.days
|
|||
|
|
this.hours = this.startObj.hours
|
|||
|
|
this.minutes = this.setArray(0, 59)
|
|||
|
|
} else if (cy === sy && cm === sm) { // 值与开始时间年、月相同
|
|||
|
|
// console.log(55)
|
|||
|
|
this.months = this.startObj.months
|
|||
|
|
this.days = this.startObj.days
|
|||
|
|
this.hours = this.setArray(0, 23)
|
|||
|
|
this.minutes = this.setArray(0, 59)
|
|||
|
|
} else if (cy === sy) { // 值与开始时间年份相同
|
|||
|
|
// console.log(66)
|
|||
|
|
this.months = this.startObj.months
|
|||
|
|
this.days = this.setDays(cy, cm)
|
|||
|
|
this.hours = this.setArray(0, 23)
|
|||
|
|
this.minutes = this.setArray(0, 59)
|
|||
|
|
} else { // 值与开始时间、结束时间不同年月
|
|||
|
|
// console.log(77)
|
|||
|
|
this.months = this.setArray(1, 12)
|
|||
|
|
this.days = this.setDays(cy, cm)
|
|||
|
|
this.hours = this.setArray(0, 23)
|
|||
|
|
this.minutes = this.setArray(0, 59)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (endSIFlag) {
|
|||
|
|
const di = this.days.indexOf(cd)
|
|||
|
|
|
|||
|
|
cmi = this.months.indexOf(cm)
|
|||
|
|
cdi = di === -1 ? this.days.length - 1 : di
|
|||
|
|
chi = this.hours.indexOf(ch)
|
|||
|
|
cminui = this.minutes.indexOf(cminu)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.$nextTick(_ => {
|
|||
|
|
this.pickerVal = [cyi, cmi, cdi, chi, cminui]
|
|||
|
|
this.changeDisabled = false
|
|||
|
|
this.showCover = false
|
|||
|
|
this.hasChange = false
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 设置开始/结束时间相关变量
|
|||
|
|
getSE() {
|
|||
|
|
let s = this.start
|
|||
|
|
let e = this.end
|
|||
|
|
s = s ? s : '2010/01/01 00:00'
|
|||
|
|
e = e ? e : '2050/12/31 23:59'
|
|||
|
|
|
|||
|
|
const {val: start, y: sy, m: sm, d: sd, h: sh, minu: sminu} = this.trimDate(s)
|
|||
|
|
const {val: end, y: ey, m: em, d: ed, h: eh, minu: eminu} = this.trimDate(e)
|
|||
|
|
return {
|
|||
|
|
start, sy, sm, sd, sh, sminu,
|
|||
|
|
end, ey, em, ed, eh, eminu
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 返回时间信息
|
|||
|
|
trimDate(val, month, day) {
|
|||
|
|
const reg = /^\d{4}-\d{1,2}-\d{1,2}( \d{1,2}:\d{1,2})?(:\d{1,2})?$/
|
|||
|
|
if (typeof val === 'string' && reg.test(val)) {
|
|||
|
|
val = val.replace(/-/g, '/')
|
|||
|
|
}
|
|||
|
|
const curr = new Date(val)
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
val: curr,
|
|||
|
|
y: curr.getFullYear(),
|
|||
|
|
m: month ? month : curr.getMonth() + 1,
|
|||
|
|
d: day ? day : curr.getDate(),
|
|||
|
|
h: curr.getHours(),
|
|||
|
|
minu: curr.getMinutes()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 获取一个范围内的整数，返回数组
|
|||
|
|
setArray(start, end) {
|
|||
|
|
const arr = []
|
|||
|
|
for (let i = start; i <= end; i ++) {
|
|||
|
|
arr.push(i)
|
|||
|
|
}
|
|||
|
|
return arr
|
|||
|
|
},
|
|||
|
|
// 将数字转换成两位
|
|||
|
|
trimNum(num) {
|
|||
|
|
num = num >= 10 ? num : `0${num}`
|
|||
|
|
return num
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.date {
|
|||
|
|
padding: 16rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.date-text {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
.border {
|
|||
|
|
border: 1rpx solid;
|
|||
|
|
border-radius: 6rpx;
|
|||
|
|
}
|
|||
|
|
.border-bottom {
|
|||
|
|
border-bottom: 1rpx solid;
|
|||
|
|
}
|
|||
|
|
.calendar {
|
|||
|
|
width: 30rpx;
|
|||
|
|
height: 30rpx;
|
|||
|
|
border: 1rpx solid;
|
|||
|
|
border-radius: 4rpx;
|
|||
|
|
margin-right: 16rpx;
|
|||
|
|
margin-top: 6rpx;
|
|||
|
|
position:relative;
|
|||
|
|
}
|
|||
|
|
.calendar .calendar-line {
|
|||
|
|
width: 26rpx;
|
|||
|
|
height: 4rpx;
|
|||
|
|
position:absolute;
|
|||
|
|
left: 2rpx;
|
|||
|
|
top: 10rpx;
|
|||
|
|
opacity: 0.6;
|
|||
|
|
z-index:1;
|
|||
|
|
}
|
|||
|
|
.calendar .calendar-line-bottom {top: 20rpx}
|
|||
|
|
.calendar .calendar-top {
|
|||
|
|
position:absolute;
|
|||
|
|
top:-6rpx;
|
|||
|
|
width: 4rpx;
|
|||
|
|
height: 12rpx;
|
|||
|
|
z-index:2;
|
|||
|
|
border-radius: 2rpx;
|
|||
|
|
}
|
|||
|
|
.calendar .calendar-top-left {left:6rpx;}
|
|||
|
|
.calendar .calendar-top-right {right:6rpx;}
|
|||
|
|
.arrow-icon {
|
|||
|
|
width: 26rpx;
|
|||
|
|
height: 26rpx;
|
|||
|
|
transform: rotate(45deg);
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
}
|
|||
|
|
.ir-clear {
|
|||
|
|
min-width: 40rpx;
|
|||
|
|
min-height: 40rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
.ir-clear-icon {
|
|||
|
|
position:relative;
|
|||
|
|
width: 30rpx;
|
|||
|
|
height: 4rpx;
|
|||
|
|
transform:rotate(45deg);
|
|||
|
|
border-radius: 4em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ir-clear-icon .clear-line {
|
|||
|
|
position:absolute;
|
|||
|
|
width: 30rpx;
|
|||
|
|
height: 4rpx;
|
|||
|
|
transform:rotate(90deg);
|
|||
|
|
border-radius: 4em;
|
|||
|
|
}
|
|||
|
|
.ir-mask {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
background-color: rgba(0,0,0,.1);
|
|||
|
|
}
|
|||
|
|
.picker-con {
|
|||
|
|
width: 750rpx;
|
|||
|
|
border-top-right-radius: 30rpx;
|
|||
|
|
border-top-left-radius: 30rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
box-shadow: 0 0 20rpx 0 rgba(0,0,0,.4);
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
background-color: #fff;
|
|||
|
|
}
|
|||
|
|
.flex {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
.ir-btn {
|
|||
|
|
width: 120rpx;
|
|||
|
|
padding: 26rpx 20rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.picker-view {
|
|||
|
|
width: 750rpx;
|
|||
|
|
height: 500rpx;
|
|||
|
|
}
|
|||
|
|
.picker-view .item {
|
|||
|
|
line-height: 50px;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.cover {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
}
|
|||
|
|
</style>
|