You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
119 lines
2.7 KiB
119 lines
2.7 KiB
<template>
|
|
<view class="jnpf-date-range">
|
|
<view class="u-flex">
|
|
<jnpf-date-time :type="jnpfKey" v-model="startValue" :placeholder="placeholder" :disabled="disabled"
|
|
inputType="text" scene="searchList" :format="format" @change="change" :defaultTime="startDefaultTime"
|
|
selectType='start' :key="key" ref="dateTime">
|
|
</jnpf-date-time>
|
|
<view class="u-p-l-10 u-p-r-10">
|
|
至
|
|
</view>
|
|
<jnpf-date-time :type="jnpfKey" v-model="endValue" :placeholder="placeholder" :disabled="disabled"
|
|
inputType="text" scene="searchList" :format="format" @change="change" :defaultTime="endDefaultTime"
|
|
selectType='end' :key="key+1" ref="dateTime">
|
|
</jnpf-date-time>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'jnpf-date-range',
|
|
model: {
|
|
prop: 'value',
|
|
event: 'input'
|
|
},
|
|
props: {
|
|
value: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: '请选择日期范围'
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
format: {
|
|
type: String,
|
|
default: 'yyyy-MM-dd HH:mm:ss'
|
|
},
|
|
jnpfKey: {
|
|
type: String,
|
|
default: 'date'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
startDefaultTime: '',
|
|
endDefaultTime: '',
|
|
startValue: '',
|
|
endValue: '',
|
|
datetimerange: [],
|
|
datetimerangeObj: {},
|
|
key: +new Date()
|
|
}
|
|
},
|
|
watch: {
|
|
value: {
|
|
immediate: true,
|
|
handler(val) {
|
|
if (Array.isArray(val) && val.length > 0) {
|
|
this.startValue = val[0]
|
|
this.endValue = val[1]
|
|
}
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
change(e, type) {
|
|
this.datetimerange = []
|
|
if (type == 'start') {
|
|
const format = 'yyyy-mm-dd hh:MM:ss'
|
|
this.$set(this.datetimerangeObj, type, e)
|
|
this.$refs.dateTime.defaultTime = this.jnpfKey == 'time' ? this.datetimerangeObj['start'] : this.$u
|
|
.timeFormat(this.datetimerangeObj['start'], format)
|
|
this.handelVal()
|
|
} else {
|
|
this.$set(this.datetimerangeObj, type, e)
|
|
this.handelVal()
|
|
}
|
|
},
|
|
handelVal() {
|
|
this.datetimerange.unshift(this.datetimerangeObj['start'])
|
|
this.datetimerange.push(this.datetimerangeObj['end'])
|
|
if (this.datetimerange[0] > this.datetimerange[1]) {
|
|
this.$u.toast('开始不能大于结束')
|
|
setTimeout(() => {
|
|
this.startValue = ""
|
|
this.endValue = ""
|
|
this.datetimerangeObj = {}
|
|
this.datetimerange = []
|
|
this.key = +new Date()
|
|
}, 500)
|
|
return
|
|
}
|
|
this.$emit('input', this.datetimerange)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.jnpf-date-range {
|
|
width: 100%;
|
|
|
|
/deep/.u-input__input {
|
|
text-align: center !important;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
/deep/.uni-date__x-input {
|
|
height: 100% !important;
|
|
}
|
|
|
|
/deep/.uni-datetime-picker--btn {
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
</style> |