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;
            }
          }
        },
      },
    };
  },
相关推荐
时光足迹7 分钟前
uni-app 里把加密视频嵌入页面播放?我分析了 4 种方案,只有 1 种接近完美
前端·vue.js·uni-app
时光足迹22 分钟前
JPush UniApp UTS 插件完全参考手册:API、事件与厂商通道一网打尽
vue.js·ios·uni-app
时光足迹28 分钟前
极光推送全攻略(下):uni-app 代码实现与 iOS 排查实战
vue.js·ios·uni-app
To_OC33 分钟前
万字解析《JS 语言精粹》之第五章:继承 5 大核心精髓(JS 原型核心)
前端·javascript·代码规范
疯狂的魔鬼2 小时前
一个"懂分寸"的文本省略组件是怎样炼成的
前端·vue.js·设计
裕波2 小时前
AI 正在重写应用开发。Vue 与 Vite,给出新的答案。
javascript·vue.js
妙码生花2 小时前
现代前端的极致性能 icon 加载方案(死磕成功版)
前端·vue.js·typescript
kyriewen3 小时前
折腾了半年 AI 编程工作流,最后发现效率瓶颈是桌上那块屏幕
前端·javascript·ai编程
用户2136610035725 小时前
Vue2脚手架工程化与Axios集成
前端·vue.js
用户83134859306986 小时前
Cesium实现黄昏效果:按钮一键控制打开/关闭黄昏效果,滑块拖动实时控制黄昏浓烈度
vue.js·cesium