el-date-picker type=daterange 日期范围限制

html (组件:element-ui)

重点: :picker-options="pickerOptions"

html 复制代码
<template>
  <el-date-picker
    v-model="form.dateRange"
    type="daterange" 
    value-format="yyyy-MM-dd"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    :picker-options="pickerOptions"
  >
  </el-date-picker>
</template>

js部分

javascript 复制代码
data(){
 return{
   form:{
    a:[]
   },
   jyData=['2025-07-1','2025-09-01'] //限制区间(只能选这个区间内的)
   pickerMinDate: '', // 用于存储开始日期的时间戳
   pickerOptions: {
     onPick: this.handlePick,
     disabledDate: this.handleDisabledDate
   }
 }
}
handlePick({ maxDate, minDate }) {
  // 记录开始日期的时间戳(转为当天0点,避免时间影响)
 this.pickerMinDate = minDate ? new Date(minDate.toDateString()).getTime() : '';
 if (maxDate) {
        this.pickerMinDate = '';
  }
},
// 限制区间
handleDisabledDate(time) {
  const startData=new.Date(this.jyData[0])
  const endData=new.Date(this.jyData[1])
  return time.getTime()<startData.getTime() || time.getTime()>endData.getTime()
}
相关推荐
蓝莓味的口香糖30 分钟前
【JS】什么是单例模式
开发语言·javascript·单例模式
reembarkation2 小时前
自定义分页控件,只显示当前页码的前后N页
开发语言·前端·javascript
Roye_ack3 小时前
【项目实战 Day9】springboot + vue 苍穹外卖系统(用户端订单模块 + 商家端订单管理模块 完结)
java·vue.js·spring boot·后端·mybatis
gerrgwg3 小时前
React Hooks入门
前端·javascript·react.js
汉字萌萌哒3 小时前
【 HTML基础知识】
前端·javascript·windows
北城以北88885 小时前
Vue--Vue基础(二)
前端·javascript·vue.js
FuckPatience7 小时前
Vue 组件定义模板,集合v-for生成界面
前端·javascript·vue.js
有梦想的攻城狮7 小时前
从0开始学vue:vue和react的比较
前端·vue.js·react.js
silent_missile10 小时前
vue3父组件和子组件之间传递数据
前端·javascript·vue.js
克里斯蒂亚诺更新11 小时前
微信小程序app.js中每30秒调用一次wx.getLocation
javascript·微信小程序·小程序