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>
相关推荐
liberty8883 分钟前
dppt如何找到弹框
java·服务器·前端
宁雨桥5 分钟前
使用pnpm构建高效Monorepo:从零到一的完整指南
前端·pnpm·项目架构
chéng ௹7 分钟前
uniapp vue3 unipush2.0 调用系统通知功能流程
前端·vue.js·uni-app
小菜今天没吃饱10 分钟前
DVWA-XSS(DOM)
前端·javascript·xss·dvwa
q***046312 分钟前
Spring Cloud Alibaba 组件版本选择
android·前端·后端
李少兄12 分钟前
解决 `npm install` 卡在 `idealTree: sill idealTree buildDeps` 的排查与修复
前端·npm·node.js
毕设十刻15 分钟前
基于Vue的企业管理系统pk6uy(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js
276695829216 分钟前
雷池waf 逆向
java·开发语言·前端·python·wasm·waf·雷池waf
w***488217 分钟前
解决报错net.sf.jsqlparser.statement.select.SelectBody
android·前端·后端
MisterZhang66619 分钟前
vue3 markMap使用
vue.js·markmap