el-date-picker日期时间选择器限制可选的日期范围

业务场景:需要限制日期时间选择器可选择的日期,有两种模式,

一种是已知范围,只能选已知范围内的日期,

另一种是知道最近天数,只能选今天往前的天数内的日期,超出不能选。

html 复制代码
<el-date-picker 
  v-model="formData.getTime" 
  :disabledDate="disabledDateOptions"
  type="datetime" :clearable="false"
  @change="changeDateTime"
  format='YYYY-MM-DD HH:mm'
  value-format="YYYY-MM-DD HH:mm:ss"
  placeholder="采集时间"/>
javascript 复制代码
disabledDateOptions: (date) => {
        if (state.modeChoice == '1') {
          // 时间范围模式 例如在"2023-11-16"到"2024-01-04"这段期间可以选,否则不可以选
          const startDate = new Date(moment("2023-11-16").format('YYYY-MM-DD 00:00:00'));
          const endDate = new Date(moment("2024-01-04").format('YYYY-MM-DD 23:59:59'));
          return date.getTime() < startDate.getTime() || date.getTime() > endDate.getTime();
        } else {
          // 最近天数模式 例如state.timedays = 3, 那就是从今天起3天前的可以选,其他日期不能选
          return date.getTime() > Date.now() || date.getTime() < Date.now() - 24 * 60 * 60 * 1000 * state.timedays
        }
}
相关推荐
pany1 分钟前
第一款 AI 友好的开源 Vue 模板 —— V3 Admin Vite / MobVue
前端·vue.js·aigc
幼儿园技术家5 分钟前
数组去重的几种姿势
前端
Hilaku6 分钟前
写了8年代码,我发现决定你薪水的,往往不是技术
前端·面试·掘金技术征文
Java陈序员7 分钟前
又一款基于 SpringBoot + Vue 实现的开源新零售商城系统!
vue.js·spring boot·uni-app
孜然卷k9 分钟前
C#项目 在Vue/React前端项目中 使用使用wkeWebBrowser引用并且内部使用iframe网页外链 页面部分白屏
前端·vue.js·react.js·c#
冰镇生鲜9 分钟前
在 vue 中优雅封装 resize 事件[单例模式、订阅机制、防抖...]
前端
韩师傅19 分钟前
《气象行业龙头Windy.com为何这么牛?》
前端·产品
Mintopia20 分钟前
Three.js 顶点与颜色点的装配艺术:从像素到彩虹的底层之旅
前端·javascript·three.js
brzhang21 分钟前
看到 Claude Code 和 Cursor 的真面目后,我再也回不去单纯的 IDE 时代了
前端·后端·架构
coder_lorraine22 分钟前
OpenResty 安装指南
服务器·前端