ElementUI 时间组件限制

最新推荐文章于 2024-12-12 10:05:53 发布

原创

最新推荐文章于 2024-12-12 10:05:53 发布 · 968 阅读

收录于

当前文章被以下社区和专栏收录：

这篇博客介绍了如何在前端Vue项目中使用el-date-picker组件设置时间选择限制。通过设置picker-options属性，确保用户选择的第二个日期始终大于第一个日期。博主详细展示了如何在data中定义pickerOptions和pickerOptions2，分别用于防止选择当前时间之前和小于前一个日期的时间。

在这里插入图片描述

两个时间组件做个限制，第二个可选择时间必须大于第一个时间

给组件写上:picker-options="pickerOptions"属性

<el-date-picker type="date" placeholder="选择日期" v-model="form.jzdate" value-format="yyyy-MM-dd" 
      :picker-options="pickerOptions"></el-date-picker>
      
<el-date-picker type="date" :picker-options="pickerOptions2" placeholder="选择日期" v-model="form.jhdate" value-format="yyyy-MM-dd"></el-date-picker>

pickerOptions在data里写

//判断时间不能选择今天以前的时间
 pickerOptions: {
             disabledDate(time) {
                 var timeNow = Date.now()
                 var before = timeNow - 24 * 60 * 60 * 1000
                 return time.getTime() < before;
             },
         },

//判断时间选择上个选择时间之后的时间
    pickerOptions2: {
        di