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
        }
}
相关推荐
孤水寒月18 分钟前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀27 分钟前
html初学者第一天
前端·html
速易达网络3 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘3 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家3 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689974 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽5 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头5 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全6 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing6 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript