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

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

原创最新推荐文章于 2024-10-26 22:54:41 发布 · 3.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue

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

部署运行你感兴趣的模型镜像

<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()
        }
      },
    }
}

您可能感兴趣的与本文相关的镜像