el-date-picker 限制固定开始时间与结束日期,用户只能在此范围内选择

今天拿到的需求是,开始时间与结束时间是固定的,用户只能在这个范围内选择,为了用户体验好点,我选择了把不能选的日期直接置灰这种实现效果。

效果如下:能清楚的看到 2023-01-04 之前的日期都不能选择

当前时间限制 开始范围是2023-01-01 00:00  截至时间是2023-02-28 00:00

代码如下: 

<template>
 <div>
  // ....此处省略其余代码
       <el-form-item label="任务截至时间" prop="startTime">
            <el-date-picker
              :disabled="hasTime"
              value-format="yyyy-MM-dd HH:mm"
              format="yyyy-MM-dd HH:mm"
              v-model="form.startTime"
              @change="changeTime"
              type="datetime"
              :picker-options="startTimePicker"
              placeholder="请选择开始日期"
            >
            </el-date-picker>
          </el-form-item>
 </div>
</template>

<srcipt>
 export defalut {
    data() {
      return {
        startTimePicker: {
          disabledDate: time => {
            // 这个dateTime 是拿到的时间范围值
             const [start, end] = this.dateTime
             const timer = new Date(time).getTime()
             return timer < new Date(start) || timer > new Date(end)
           }
         },
         form: {
           startTime: ''
          },
         dateTime: []
       }
     }
}
}
</script>

很怕大家看不明白我写的 尽量想写的再详细点


看了的话点个赞再走吧~~~

猜你喜欢

转载自blog.csdn.net/vanora1111/article/details/125980642