ELEMENT-UI 日期范围选择控件，限制只能选择30天

最新推荐文章于 2026-04-06 02:09:32 发布

原创

最新推荐文章于 2026-04-06 02:09:32 发布 · 3.5k 阅读

标签

#html #vue.js #javascript

收录于

该博客介绍了如何使用Element UI的日期选择器组件（daterange类型）来限定用户只能选择不超过30天的日期范围。通过设置`pickerOptions`属性和`disabledDate`回调函数，实现了在选择新的日期时，自动限制日期范围在当前日期前后30天内。此功能适用于需要限制日期选择场景的应用。

问题描述

element-ui 日期选择器（daterange类型）选择日期范围为一个月，选择的时间前后只能选择一个月内日期

知识点

在这里插入图片描述

下面是具体实现代码

实现element ui 日期空间，前后范围为30天内

<el-date-picker v-model="value1" type="daterange"
	  start-placeholder="开始日期" 
	  range-separator="至" 
	  end-placeholder="结束日期"
	  value-format="yyyy-MM-dd"
	  :picker-options="pickerOptions1">
</el-date-picker>

data () {
   return {
     value1: '', // 日
     data1Map: new Map(),
     data2Map: new Map(),
     pickerMinDate: null,
     pickerMaxDate: null,
     day31: 31 * 24 * 3600 * 1000,
     // 日期使用
     pickerOptions1: {
        onPick: ({ maxDate, minDate }) => {
         if (minDate && this.pickerMinDate) {
           this.pickerMinDate = null;