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;
            }
          }
        },
      },
    };
  },
相关推荐
香芋芋圆2 小时前
iD-editor 详解|OSM官方在线编辑器,基于D3.js的轻量地图编辑器
开发语言·javascript·编辑器
晗夜未央4 小时前
任务队列反复失败,先分清重试、阻塞和结果待核对
开发语言·javascript
jktantan5 小时前
每个节点 41 字节:把一棵百万节点树拆进 14 个 typed array
前端·javascript·vue.js·算法·typescript
我命由我123456 小时前
访客系统形式(有用户概念、无用户概念)
java·开发语言·前端·javascript·python·产品运营·产品经理
程序员大阳6 小时前
副队长JavaScript教程(65)-详解JSON:轻量级数据交换格式
javascript·json·序列化·反序列化·stringify·parse
小大宇7 小时前
Vue知识点-ElementPlus-06 单选+多选+下拉+日期选择
前端·vue.js·elementui
paopaokaka_luck8 小时前
基于springboot+vue的益暖微光公益服务平台(DeepSeek公益助手、善款信息追溯、志愿服务积分闭环、ECharts运营分析、活动状态自动流转)
java·前端·javascript·spring boot·mysql·架构·echarts
栀椩8 小时前
Electron 内嵌页面跨域问题(CORS/PNA)解决全记录
前端·javascript·electron
SEO_juper8 小时前
Chrome 扩展一键查看当前页面 SEO 信息:不用切页面,点一下全出来
前端·javascript·chrome
Highcharts.js8 小时前
CSUN 2026|Highcharts无障碍数据与AI分享
javascript·人工智能·数据分析·highcharts·图表开发