el-date-picker组件时间不可选中未来时间

需求:对el-date-picker组件的时间进行控制

实现:

 <el-date-picker
                
                  v-model="form.date"
                  size="mini"
                  type="date"
                  style="width: 140px"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                  :picker-options="setDisabled"
                >
                </el-date-picker>

通过picker-options属性来控制可选时间的范围

在data中定义seDisabled对象,通过disabledDate返回值来控制可选时间范围

比如:

 setDisabled: {
        disabledDate(time) {
          return time.getTime() > Date.now(); // 可选历史天、可选当前天、不可选未来天
          // return time.getTime() > Date.now() - 8.64e7;  // 可选历史天、不可选当前天、不可选未来天
          // return time.getTime() < Date.now() - 8.64e7;  // 不可选历史天、可选当前天、可选未来天
          // return time.getTime() < Date.now(); // 不可选历史天、不可选当前天、可选未来天
        },
      },

不可选中未来天,当前时间为2022年06月07日,效果:

猜你喜欢

转载自blog.csdn.net/weixin_56818823/article/details/131080833
今日推荐