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

从起始日期开始算,前后不超过 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;
    },
}
···

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-date-picker 是一个基于 Element UI 的日期选择器组件,用于在网页中选择日期。要限制起始范围,可以使用其属性 `picker-options`。 `picker-options` 是一个对象,可以设置以下属性来限制起始范围: 1. `disabledDate`:一个函数,用于禁用特定的日期。在该函数中,你可以根据自己的需求返回 `true` 或 `false` 来禁用或启用日期。例如,你可以禁用过去的日期或未来的日期。 示例代码: ```html <el-date-picker v-model="date" :picker-options="pickerOptions" ></el-date-picker> ``` ```javascript data() { return { pickerOptions: { disabledDate(time) { return time.getTime() < Date.now(); // 禁用过去的日期 } } }; } ``` 2. `disabledStartDate` 和 `disabledEndDate`:两个函数,分别用于禁用起始日期和结束日期。在这两个函数中,你可以根据自己的需求返回 `true` 或 `false` 来禁用或启用日期。例如,你可以禁用某个特定的日期作为起始日期或结束日期。 示例代码: ```html <el-date-picker v-model="startDate" :picker-options="pickerOptions" ></el-date-picker> <el-date-picker v-model="endDate" :picker-options="pickerOptions" ></el-date-picker> ``` ```javascript data() { return { pickerOptions: { disabledStartDate(time) { // 禁用某个特定的日期作为起始日期 const disabledDate = new Date('2022-01-01'); return time.getTime() === disabledDate.getTime(); }, disabledEndDate(time) { // 禁用过去的日期作为结束日期 return time.getTime() < Date.now(); } } }; } ``` 这样,你就可以使用 `picker-options` 属性来限制 el-date-picker 的起始范围了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值