el-date-picker限制最大选择范围

最新推荐文章于 2025-06-05 16:09:26 发布

时遇¥.¥..

最新推荐文章于 2025-06-05 16:09:26 发布

阅读量904

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端框架

本文链接：https://blog.youkuaiyun.com/weixin_46544600/article/details/131291285

文章介绍了如何使用Vue.js的自定义组件h-date-picker设置日期范围选择器，确保用户选择的日期区间不超过180天。通过绑定picker-options和disabledDate属性，动态计算并限制最大日期范围，同时在onPick事件中更新最小日期。

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

从起始日期开始算，前后不超过 180 天

<h-date-picker class="com-input-wrap" popper-class="popperCls" v-model="formData.timeRange"
                    type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                    value-format="yyyy-MM-dd" :clearable="false" :picker-options="pickeroptions" @blur="setpickerMinDate">
                  </h-date-picker>

data(){
	return {
		pickerMinDate: null,
      pickeroptions: { 
        onPick: (time) => {
          this.pickerMinDate = time.minDate;
          if (time.maxDate) {
            this.pickerMinDate = null;
          }
        },
        disabledDate: (time) => { // 限制最大范围为180天
          // console.log(time); // 这里的参数和函数一样可以被打印出来
          // console.log(time.getTime());
          const month = 180 * 24 * 60 * 60 * 1000  // 限定一个日期范围，这里是180天
          let preSevenday = this.pickerMinDate?.getTime() - month;
          let nextSevenday = this.pickerMinDate?.getTime() + month;
          return time.getTime() < preSevenday || time.getTime() > nextSevenday;// 直接return需要禁止的选择的日期
        }
      },
	}
},
methods: {
//配合 限制最大日期选择范围180天
    setpickerMinDate(picker) {
      
      console.log('111111111', picker.parsedValue)
      this.pickerMinDate = null;
    },
}
···