element-plus的el-data-picker中没有了pick-options,但是新增了事件calendar-change(等同onPick),disable-date也有,同样可以实现
Element-plus文档
代码实现
组件
<el-form-item v-if="conditionForm.filterType == 0" label="时间范围:" prop="rangeDate"><el-date-pickerv-model="validateForm.rangeDate"type="datetimerange"range-separator="到"start-placeholder="开始日期"end-placeholder="结束日期"format="YYYY/MM/DD HH:mm:ss"value-format="YYYY-MM-DD H:m:s":default-time="defaultTime2":disabled-date="disabledDate"@focus="handleFocus"@calendar-change="handleChange"/></el-form-item>
方法
......//变量const chooseDay = ref(null)const handleChange = (val: Date[]) => {const [pointDay] = valchooseDay.value = pointDay}//取值方法const handleFocus = () => {chooseDay.value = null}const disabledDate = (time: number) => {if (!chooseDay.value) {return false}let timeRange = 30const con1 = new Date(chooseDay.value).getTime() - timeRange * 24 * 60 * 60 * 1000const con2 = new Date(chooseDay.value).getTime() + timeRange * 24 * 60 * 60 * 1000return time < con1 || time > con2}return {handleChange,handleFocus,disabledDate}......