
<el-date-picker
v-model="rq"
value-format="YYYY-MM-DD"
type="daterange"
range-separator="至"
start-placeholder="选择日期"
end-placeholder="选择日期"
style="width:240px;"
:disabled-date="disabledDate"
@calendar-change="chooseDay = $event[0]"
@focus="chooseDay = null" />
//设置默认选中当前7天
let rq = ref<any>()
function sevenDay() {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
const timestart = proxy.parseTime(start)
const timeend = proxy.parseTime(end)
rq.value = [timestart, timeend]
}
/**
* element-plus 时间选择器7天内
* 选择的日期 chooseDay
* @param {*} time 日期选择器范围控制
*/
const chooseDay = ref(null)
export const disabledDate = (time: Date) => {
if (chooseDay.value) {// 如何选择了一个日期
const one = 7 * 24 * 3600 * 1000 // 7天的时间戳
const minTime = chooseDay.value - one // 当前日期 - one = 7天之前
const maxTime = chooseDay.value - 0 + one // 当前日期 + one = 7天之后(必须-0,不然不会变成数字时间戳格式)
return (
time.getTime() < minTime || time.getTime() > maxTime || time.getTime() > Date.now()
)
} else {
return time.getTime() > Date.now() // 如果没有选择日期,就要限制不能选择还没到的日期
}
}
onMounted(() => {
sevenDay()
})