需求:只能选择今天之后的提起(不包括今天),点击本周、本月的时候不包括当天,也就是今天,默认展示前7天,接口需要的格式为时间戳。(使用moment.js、day.js这样的事件处理插件效率要比getTime高,省去很多数据处理)
html:
<el-date-picker
@change="handleDateChange"
v-model="form.date"
type="daterange"
class="date"
range-separator="至"
value-format="timestamp"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
/>
data:
form: {date: [
dayjs().subtract(7, 'day').valueOf(),
dayjs().subtract(1, 'day').valueOf()
]},
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now() - 8.64e7
},
shortcuts: [
{
text: '本周',
onClick: (picker) => {
const start = dayjs().startOf('week').add(1, 'day').valueOf()
const end = dayjs().subtract(1, 'day').valueOf()
var now = new Date().getDay() // 判断今天星期几,周日-0,周一-1
// 周一无数据,只能选择今天及之后的日期
if (now === 1) {
this.$message.warning('当前时间区间暂无数据,请选择其他时间')
picker.$emit('pick', '')
return
}
picker.$emit('pick', [start, end])
}
},
{
text: '上周',
onClick(picker) {
const start = dayjs()
.add(-1, 'week')
.startOf('week')
.add(1, 'day')
.valueOf()
const end = dayjs()
.add(-1, 'week')
.endOf('week')
.add(1, 'day')
.valueOf()
picker.$emit('pick', [start, end])
}
},
{
text: '本月',
onClick: (picker) => {
const start = dayjs().startOf('month').valueOf()
const end = dayjs().subtract(1, 'day').valueOf()
var now = dayjs().format('DD') // 判断今天几号
// 1号无数据,只能选择今天及之后的日期
if (now === '01') {
this.$message.warning('当前时间区间暂无数据,请选择其他时间')
picker.$emit('pick', ['', ''])
return
}
picker.$emit('pick', [start, end])
}
},
{
text: '上月',
onClick(picker) {
const start = dayjs().add(-1, 'month').startOf('month').valueOf()
const end = dayjs().add(-1, 'month').endOf('month').valueOf()
picker.$emit('pick', [start, end])
}
}
]
}
数据格式,请求接口的时候处理:
const params = {
start_time: parseInt((this.date[0] || 0) / 1000),
end_time: parseInt((this.date[1] || 0) / 1000)
}