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()
}
相关推荐
Moonbit6 分钟前
MoonBit Pearls Vol.13:初探 MoonBit 中的 JavaScript 交互
javascript·后端
我家媳妇儿萌哒哒11 分钟前
Vue2 elementUI年份区间选择组件
前端·javascript·elementui
山塘小鱼儿17 分钟前
JavaScript 性能优化实战大纲
javascript
asfdsfgas32 分钟前
Angular CDK 响应式工具实操指南:自适应布局构建技巧
javascript·ecmascript·angular.js
CptW1 小时前
Vue3 的“批量渲染”机制
vue.js·面试
计算机学姐1 小时前
基于SpringBoo+Vue的医院预约挂号管理系统【个性化推荐算法+可视化统计】
java·vue.js·spring boot·mysql·intellij-idea·mybatis·推荐算法
计算机学姐1 小时前
基于微信小程序的奶茶店点餐平台【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
东方石匠2 小时前
Javascript常见面试题
前端·javascript·面试
性野喜悲2 小时前
<script setup lang=“ts“>+uniapp实现轮播(swiper)效果
前端·javascript·vue.js·小程序·uni-app
敲敲了个代码2 小时前
[特殊字符] Web 字体裁剪优化实践:把 42MB 字体包瘦到 1.6MB
前端·javascript·学习·html·web