1
Jan.2021
<el-date-picker
v-model="dateRange"
type="daterange"
align="right"
style="margin-right: 10px;"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
format="yyyy年MM月dd日"
value-format="yyyy-MM-dd"
class="filter-item"
@keyup.enter.native="handleFilter"
/>
在选择日期范围时,默认情况下左右面板会联动。如果希望两个面板各自独立切换当前月份,可以使用unlink-panels属性解除联动。
// 日期范围选择器
pickerOptions: {
// 最大只能选择最近92天的时间范围
// disabledDate(time) {
// return time.getTime() < Date.now() - (3600 * 1000 * 24 * 92)
// },
shortcuts: [{
text: '今天',
onClick(picker) {
const date = new Date()
picker.$emit('pick', [date, date])
}
}, {
text: '昨天',
onClick(picker) {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24)
picker.$emit('pick', [date, date])
}
}, {
text: '本月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.setDate(1))
picker.$emit('pick', [start, end])
}
}, {
text: '最近一周',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', [start, end])
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
picker.$emit('pick', [start, end])
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
picker.$emit('pick', [start, end])
}
}]
}

