1.
<div style="float: right"> <el-date-picker v-model="state.rangeData[0]" type="date" value-format="YYYY-MM-DD" placeholder="开始" :disabled-date="pickerStartDisable" @change="changeDateRange(state.rangeData)" />- <el-date-picker v-model="state.rangeData[1]" type="date" value-format="YYYY-MM-DD" placeholder="结束" :disabled-date="pickerEndDisable" @change="changeDateRange(state.rangeData)" /> </div> const pickerStartDisable = (time: any) => { const temp = state.rangeData[1]; if (temp) { return ( time.getTime() < dayjs(temp).subtract(1, 'month').valueOf() || time.getTime() > dayjs(state.rangeData[1]).valueOf() ); } } const pickerEndDisable = (time: any) => { const temp = state.rangeData[0]; if (temp) { return ( time.getTime() > dayjs(temp).add(1, 'month').valueOf() || time.getTime() < dayjs(state.rangeData[0]).valueOf() ); } }
2.
<el-date-picker style="float: right" v-model="state.rangeData" type="daterange" range-separator="-" start-placeholder="开始" end-placeholder="结束" value-format="YYYY-MM-DD" size="default" :clearable="false" @change="changeDateRange" @calendar-change="calendarChange" @visible-change="visibleChange" :disabled-date="disabledFn" /> const startVal = ref(null); const calendarChange = (e) => { if (e[0] && !e[1]) { startVal.value = e[0]; } }; const visibleChange = (e) => { if (e) { startVal.value = null; } }; const disabledFn = (current) => { if (!startVal.value) return false; let range = [dayjs(startVal.value).subtract(30, 'day'), dayjs(startVal.value).add(30, 'day')]; let cur = dayjs(current); return cur < range[0] || cur > range[1]; };
- 区间 el-date-picker element-plus element 方式区间el-date-picker element-plus element el-date-picker element-plus value-format element el-date-picker element-plus element picker el-date-picker范围element时间 跨度el-date-picker日期element element-plus quot element-plus elmessage element element-plus element plus element-plus element类型 文件 resizeobserver notifications element-plus undelivered