vue element 日期范围选择器限制:只能选今天之前的时间 || 只能选今天之后的时间 || 选取今天往后三天内...

微微一笑绝绝子

已于 2022-11-25 11:34:16 修改

阅读量4.3k

点赞数 5

文章标签： vue.js javascript 前端 elementui ecmascript

于 2022-11-24 16:07:00 首次发布

本文链接：https://blog.youkuaiyun.com/wwyxjjz/article/details/128022412

版权

本文介绍了如何在Vue Element中使用日期选择器组件限制用户只能选择今天或者今天之后的时间，以及设置只能选择今天之前或今天以及之后的日期。通过设置`disabledDate`属性并结合时间戳进行条件判断，可以实现不同限制效果。例如，添加`-8.64e7`可以让用户不能选择今天之前的日期，而`+3*8.64e7-1`则允许用户选择今天之后的三天内日期。

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

举例：只能选今天或者今天之后的时间(如下图)

         <el-date-picker clearable
            v-model="form.limitTime"
            type="date"
            :readonly="isDetail"
            value-format="yyyy-MM-dd"
            :picker-options="expireTimeOPtion"
            placeholder="请选择处理期限">
          </el-date-picker>

注意：:picker-options="expireTimeOPtion"

一、只能选择今天或者今天之后的时间

data() {
  return {
    expireTimeOPtion: {
      disabledDate(time) {
        return time.getTime() < Date.now() - 8.64e7;  //如果没有后面的-8.64e7就是不可以选择今天的 
      }
    },
  }
}

二、今天以及今天之前的日期

data() {
  return {
    expireTimeOPtion: {
      disabledDate(time) {
        return time.getTime() > Date.now() - 8.64e6;  //如果没有后面的-8.64e6就是不可以选择今天的 
      }
    },
  }

三、只能选取今天往后三天内

data() {
  return {
   expireTimeOPtime: {
        disabledDate(time) {
          const times = new Date(new Date().toLocaleDateString()).getTime() + 3 * 8.64e7 - 1
          return time.getTime() < Date.now() - 8.64e7 || time.getTime() > times  // 如果没有后面的-8.64e7就是不可以选择今天的
        }
      }
  }
}

完结撒花！赶快试试吧！

作者：微微一笑绝绝子

出处：vue element 日期范围选择器限制:只能选今天之前的时间 || 只能选今天之后的时间 || 选取今天往后三天内 - 微微一笑绝绝子 - 博客园

本博客文章均为作者原创，转载请注明作者和原文链接。