el-date-picker限制选择的时间范围

html 复制代码
<el-date-picker
            size="mini"
            v-model="dateTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          />

限制选择今天之前的时间,并且只能选择一天

javascript 复制代码
data() {
    return {

        pickerMinDate: '',
      pickerOptions: {
        onPick: (pick) => {
          this.pickerMinDate = pick; //获取当前选择日期
        },
        disabledDate: (date) => {
          const timeStamp = 24 * 60 * 60 * 1000; //1天的时间戳
          const { minDate, maxDate } = this.pickerMinDate;
          if (date.getTime() > Date.now()) {
            return true;
          } else if (minDate && !maxDate) {
            // 日期范围控制在365天内
            const tamp = Math.abs(minDate.valueOf() - date.valueOf());
            const customTimeStamp = timeStamp * 1; //自定义天数
            if (tamp > customTimeStamp) {
              return true;
            }
          }
        },
      },

    }
}

只能选择今天往后365天

javascript 复制代码
 data() {
    return {
      valueDate: "",
      pickDate: "", //存储日期
      pickerOptions: {
        onPick: (pick) => {
          this.pickDate = pick; //获取当前选择日期
        },
        disabledDate: (date) => {
          const timeStamp = 24 * 60 * 60 * 1000; //一天的时间戳
          const { minDate, maxDate } = this.pickDate;
          if (date.getTime() < Date.now() - timeStamp) {
            //选择今天及以后的日期(如果不需要从今天开始,只需要控制范围,这个判断去掉即可)
            return true;
          } else if (minDate && !maxDate) {
            // 日期范围控制在365天内
            const tamp = Math.abs(minDate.valueOf() - date.valueOf());
            const customTimeStamp = timeStamp * 365; //自定义天数
            if (tamp > customTimeStamp) {
              return true;
            }
          }
        },
      },
    };
  },
相关推荐
silence_xiang36 分钟前
【React】首页悬浮球实现,点击出现悬浮框
前端·javascript·react.js
隔壁的大叔1 小时前
由于vite版本不一致,导致vue组件引入报错
javascript·vue.js
超级罗伯特1 小时前
大屏自适应,响应式布局,亲测有效
前端·javascript·html·大屏·驾驶舱
青衫码上行1 小时前
【Java Web学习 | 第九篇】JavaScript(3) 数组+函数
java·开发语言·前端·javascript·学习
我是ed.1 小时前
vue2 使用 cesium 展示 TLE 星历数据
vue.js·cesium
前端Hardy1 小时前
HTML&CSS&JS:赛博木鱼
前端·javascript·css
有点笨的蛋2 小时前
从值拷贝到深拷贝:彻底弄懂 JavaScript 的堆与栈
前端·javascript
有点笨的蛋2 小时前
从零掌握 Ajax:一次请求带你读懂异步数据加载原理
前端·javascript·ajax
进击的野人2 小时前
JavaScript日期操作与DOM节点管理:构建动态网页的核心技术
前端·javascript
AAA简单玩转程序设计2 小时前
JS防抖:别再让按钮“手抖”连点了!
前端·javascript·html