el-date-picker设置未来的时间不可选

最新推荐文章于 2024-10-26 22:54:41 发布

Lemon_Han酱

最新推荐文章于 2024-10-26 22:54:41 发布

阅读量3.5k

点赞数 2

文章标签： vue

本文链接：https://blog.youkuaiyun.com/Lemon_Haner/article/details/109719847

版权

本文介绍了如何在 Vue.js 中使用 Element UI 的日期选择器实现起止日期范围，并设置了禁用未来日期的策略。通过`disabledDate`函数，确保用户只能选择过去的时间范围。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-form-item label="起止时间" required>
   <el-date-picker
     v-model="record.beginDate"
     type="date"
     value-format="yyyy-MM-dd"
     placeholder="选择日期"
     :picker-options="expireTimeOption"
     style="width: 40%">
   </el-date-picker> -
   <el-date-picker
     v-model="record.endDate"
     type="date"
     value-format="yyyy-MM-dd"
     placeholder="选择日期"
     :picker-options="expireTimeOption"
     style="width: 40%">
   </el-date-picker>
</el-form-item>

data(){
    return {
      expireTimeOption: {
        disabledDate (date) {
          // disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
          return date.getTime() >= Date.now()
        }
      },
    }
}