vue elementui <el-date-picker>日期选择框限制只能选择90天内的日期(包括今天)

之前也写过其他限制日期的语句,感觉用dayjs()的subtract()和add()也挺方便易懂的,以此记录
安装dayjs npm install dayjs --save

javascript 复制代码
dayjs().add(value : Number, unit : String);
dayjs().add(7, 'day'); //在当前的基础上加7天
javascript 复制代码
dayjs().subtract(value : Number, unit : String);
dayjs().subtract(7, 'day'); //在当前基础上减少7天

案例使用:

javascript 复制代码
<template>
  <el-date-picker
    v-model="value1"
    type="date"
    placeholder="选择日期"
    :picker-options="pickerOptions">
  </el-date-picker>
</template>

<script>
import dayjs from 'dayjs'
  export default {
    data() {
      return {
        pickerOptions: {
          disabledDate(time) {
            return dayjs().subtract(1, 'day') >= time || time >= dayjs().add(89, 'day');
            // 这是可以限制可选择今天之后的三个月内的日期(不包括今天)
            // return  dayjs() >= time  ||  time >=  dayjs().add(3, 'month')
          }
        },
        value1: ''
      };
    }
  };
</script>
相关推荐
YuMiao17 分钟前
把 WebSocket 服务迁移到 Cloudflare Durable Objects —— 以一次协同编辑实战为例
javascript·node.js
zheshiyangyang18 分钟前
前端面试基础知识整理【Day-8】
前端·面试·职场和发展
a11177619 分钟前
优雅简历(html开源)
前端·开源·html
Cache技术分享24 分钟前
330. Java Stream API - 处理 Optional 对象:像流一样优雅地使用 Optional
前端·后端
感性的程序员小王37 分钟前
别再手撸架构图了!我写了个 AI 工具,把 Spring Boot 代码一键变成 Draw.io 流程图
前端·后端
左夕38 分钟前
深度解析vue的生命周期
vue.js
猪头男40 分钟前
【从零开始学习Vue|第七篇】深入组件——Props
前端
随逸17744 分钟前
《彻底解决CSS冲突!模块化CSS实战指南》
vue.js·react.js
孟健1 小时前
AI 团队翻车之后,我想告诉你这 3 件事
前端
木斯佳1 小时前
前端八股文面经大全:字节前端一面(2026-2-1)·面经深度解析
前端·状态模式