elementUI中日期时间选择器el-date-picker如何限制最多选择30天，其余时间置灰不可选

牛赛赛

于 2021-12-14 11:36:10 发布

阅读量3.5k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： vue +element 文章标签： elementui vue.js 前端

本文链接：https://blog.csdn.net/weixin_47163986/article/details/121923400

vue +element 专栏收录该内容

15 篇文章

订阅专栏

该博客介绍了一个Vue.js组件的实现，通过el-date-picker限制用户只能选择最多30天的时间范围。通过设置pickerOptions，定义了onPick和disabledDate回调函数，当选择新的开始日期时，会禁用开始日期之后超过30天和之前超过30天的所有日期，从而确保选择的日期范围不超过30天。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

日期时间选择器如何限制最多选择30天，其余时间置灰

 <el-form ref="form"  :model="form" label-position="right" label-width="180px"  size="small" >
     <el-row>
          <el-col :span="8">
              <el-form-item prop="taskDate" label="时间">
                <el-date-picker
                  v-model="form.taskDate"
                  style="width:100%"
                  type="daterange"
                  :picker-options="pickerOptions1"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
          </el-col>
       </el-row>
    </el-form>

<script>
export default {
  data () {
    return {
	    pickerMinDate: null,
	     pickerMaxDate: null,
	     day30: 30 * 24 * 3600 * 1000,
	     // 日期使用
	     pickerOptions1: {
	        onPick: ({ maxDate, minDate }) => {
	         if (minDate && this.pickerMinDate) {
	           this.pickerMinDate = null;
	         } else if (minDate) {
	           this.pickerMinDate = minDate.getTime();
	         }
	       },
	       disabledDate: (time) => {
	         if (this.pickerMinDate) {
	           return (time.getTime() > (this.pickerMinDate + this.day30)) || (time.getTime() < (this.pickerMinDate - this.day30));
	         }
	         return false;
	       }
	     },
	  }
   }
 }
</script>