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

vanora1111

已于 2023-01-06 10:30:15 修改

阅读量2.3k

点赞数 3

文章标签： vue.js elementui 前端

于 2022-07-26 09:22:38 首次发布

本文链接：https://blog.csdn.net/vanora1111/article/details/125980642

版权

这篇博客主要讨论了在Vue.js应用中，如何处理日期选择组件的开始时间和结束时间范围限制。作者遇到的问题是，用户只能在预设的时间范围内选择，但12号当天不应该可选。通过查看和分析代码，发现需要正确处理开始和结束时间的值，以及设置禁用日期的逻辑。代码中使用了el-date-picker组件，并通过计算属性来动态设置禁用日期的条件。此外，还展示了如何从Vuex store获取并格式化时间。

摘要由CSDN通过智能技术生成

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

效果如下：能清楚的看到 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>

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