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>
相关推荐
旭日猎鹰几秒前
配置ReactNative环境并创建第一个程序
javascript·react native·react.js
麷飞花3 分钟前
TypeScript问题
前端·javascript·vscode·typescript·ts
阿湯哥5 分钟前
ReAct智能体
前端·react.js·前端框架
放逐者-保持本心,方可放逐7 分钟前
electron 中的那些事(很关键)-核心要点补充
前端·javascript·electron
战族狼魂8 分钟前
Python 完整实现 BCrypt GUI 工具
java·前端·python
2301_789169548 分钟前
ai讲React 18 + Context API 极简教程 解决深层组件调用父组件里其他组件方法
javascript·react.js·ecmascript
念念不忘 必有回响11 分钟前
vue项目从零开始配置国际化
前端·javascript·vue.js
J_liaty13 分钟前
前后端跨域处理全指南:Java后端+Vue前端完整解决方案
java·前端·vue.js·spring boot·后端
小二·17 分钟前
Python Web 开发进阶实战:国际化(i18n)与多语言支持 —— Vue I18n + Flask-Babel 全栈解决方案
前端·vue.js·python
全栈前端老曹18 分钟前
【包管理】npm最常见的10大问题故障和解决方案
前端·javascript·rust·npm·node.js·json·最佳实践