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
        }
}
相关推荐
U.2 SSD6 分钟前
ECharts漏斗图示例
前端·javascript·echarts
江城开朗的豌豆6 分钟前
我的小程序登录优化记:从短信验证到“一键获取”手机号
前端·javascript·微信小程序
excel10 分钟前
Vue Mixin 全解析:概念、使用与源码
前端·javascript·vue.js
IT_陈寒17 分钟前
Java性能优化:这5个Spring Boot隐藏技巧让你的应用提速40%
前端·人工智能·后端
勇往直前plus35 分钟前
CentOS 7 环境下 RabbitMQ 的部署与 Web 管理界面基本使用指南
前端·docker·centos·rabbitmq
北海-cherish6 小时前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
2501_915909067 小时前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
white-persist8 小时前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
新中地GIS开发老师9 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang9 小时前
前端性能优化
前端·javascript·vue.js·性能优化