element 日期选择框
官方文档: 日期时间选择器.
1.选择范围
<el-date-picker
v-model="myTime" // 默认展示时间
type="daterange" // 显示类型
range-separator="-"
@change="dateChange"
value-format="timestamp" //绑定值的格式 此处为时间戳 换其他类型看官方API文档
start-placeholder="开始日期"
end-placeholder="结束日期"
:clearable="false"
:picker-options="pickerOptions" // 重点!! 定义区间选项
:default-time="['00:00:00','23:59:59']"> // 选中日期后的默认具体时刻
</el-date-picker>
2.js部分
data () {
return {
minTime: '',
pickerOptions: {
onPick: ({ maxDate, minDate }) => {
// 当点击第一个时间时,参数中只有minDate表示选中时间,maxDate为null
// 当选中日期区间后,minDate 表示左区间的日期,maxDate 表示右区间的日期
this.minTime = minDate && minDate.setHours(0, 0, 0, 0) // 将第一个选中的日期赋值给 this.minTime
// 如果选择了时间段,则清空 this.minTime
if (maxDate) {
this.minTime = ''
}
},
disabledDate: (time) => {
const three = 90 * 24 * 3600 * 1000
if (this.minTime !== '') {
// 大于选中时间后90天 || 小于选中时间后90天 || 大于今天 的所有日期都禁用
return time.setHours(23, 59, 59, 0) > (this.minTime + three) || time.setHours(0, 0, 0, 0) < (this.minTime - three) || time.getTime() > new Date().setHours(23, 59, 59, 0)
} else {
// 什么都没选,只禁用大于今天的所有日期
return time.getTime() > new Date().setHours(23, 59, 59, 0)
}
}
}
},
mounted () {
const end = new Date().setHours(23, 59, 59, 0)
const start = new Date().setHours(0, 0, 0, 0) - 3600 * 1000 * 24 * 90
this.myTime = [start, end] // 默认展示当前时间往前90天
}
总结
此处只是以90天为例所写 可以根据不同的需求来更改时间!