<el-date-picker
v-model="rangeValue"
popper-class="picker-popovers"
:shortcuts="rangeShortcuts"
class="timefilter"
@visible-change="handleVisibleChange"
type="daterange"
start-placeholder="开始时间"
end-placeholder="结束时间"
:prefix-icon="customPrefix"
value-format="YYYY-MM-DD"
>
</el-date-picker>
import dayjs from 'dayjs'
const timeText = ref('')
const customPrefix = shallowRef({
render() {
return h('div', timeText.value)
},
})
const handleVisibleChange = (type) => {
const btns = document.getElementsByClassName('el-picker-panel__shortcut')
Array.from(btns).forEach(el => {
el.addEventListener('click', function(e){
timeText.value = e.target?.innerText
})
})
}
const rangeShortcuts = ref([
{
text: '今天',
value: () => [dayjs()],
},
{
text: '昨天',
value: () => [dayjs().subtract(1, 'day')],
},
{
text: '本周',
value: () => [
dayjs().startOf('week').add(1, 'days'),
dayjs().endOf('week').add(1, 'days'),
],
},
{
text: '上周',
value: () => [
dayjs().subtract(1, 'weeks').startOf('week').add(1, 'days'),
dayjs().subtract(1, 'weeks').endOf('week').add(1, 'days'),
],
},
{
text: '本月',
value: () => [dayjs().startOf('month'), dayjs().endOf('month')],
},
{
text: '上月',
value: () => [
dayjs().subtract(1, 'months').startOf('month'),
dayjs().subtract(1, 'months').endOf('month'),
],
},
{
text: '过去5天',
value: () => [dayjs().subtract(5, 'day'), dayjs()],
},
{
text: '过去7天',
value: () => [dayjs().subtract(7, 'day'), dayjs()],
},
{
text: '过去14天',
value: () => [dayjs().subtract(14, 'day'), dayjs()],
},
{
text: '过去30天',
value: () => [dayjs().subtract(30, 'day'), dayjs()],
},
{
text: '过去60天',
value: () => [dayjs().subtract(60, 'day'), dayjs()],
},
{
text: '过去180天',
value: () => [dayjs().subtract(180, 'day'), dayjs()],
},
])
样式
.timefilter .el-icon {
@apply ml-6 mr-4;
white-space: nowrap;
}