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-picker
       v-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] = val
    chooseDay.value = pointDay
}
//取值方法
const handleFocus = () => {
       chooseDay.value = null
}
const disabledDate = (time: number) => {
   if (!chooseDay.value) {
     return false
   }
   let timeRange = 30
   const con1 = new Date(chooseDay.value).getTime() - timeRange * 24 * 60 * 60 * 1000
   const con2 = new Date(chooseDay.value).getTime() + timeRange * 24 * 60 * 60 * 1000
   return time < con1 || time > con2
 }
 return {

        handleChange,
        handleFocus,
        disabledDate
}
...
...

效果实现

在这里插入图片描述

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐