element-ui
的 el-date-picker
设置选择范围在一个月内:
<template>
<el-date-picker
placeholder="请选择"
unlink-panels
:value="timeArr"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd HH:mm:ss"
:default-time="['00:00:00', '23:59:59']"
:picker-options="pickerOptions"
@input="change($event)"
/>
</template>
<script>
export default {
name: 'DatePicker',
props: {
value: {
type: Array,
default: []
}
},
data() {
return {
selectDate: '',
// 日期时间范围在一个月以内
pickerOptions: {
onPick: ({ maxDate, minDate }) => {
this.selectDate = minDate.getTime()
if (maxDate) {
this.selectDate = ''
}
},
disabledDate: (time) => {
if (this.selectDate !== '') {
const one = 30 * 24 * 3600 * 1000
const minTime = this.selectDate - one
const maxTime = this.selectDate + one
return time.getTime() < minTime || time.getTime() > maxTime
}
}
}
}
},
methods: {
change(val) {
this.$emit('input', val)
}
}
}
</script>
页面效果:
更多推荐