elemnet ui pickerOptions 获取限制月份日期选择;

第一种方法:根据接口返回日期限制,只能选择开始日期到结束日期范围内的。
   <el-date-picker
              type="monthrange"
              :disabled="!isEdit"
              v-model="formData.effectPeriod"
              @change="handleChangeEffectStart"
              :picker-options="pickerOptions"
              value-format="yyyy-MM"
              style="width: 178px"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              range-separator="至"
              clearable
          ></el-date-picker>


data:{
      pickerOptions: {
        disabledDate: (time) => {
          // 如果函数处理比较简单,可以直接在这里写逻辑方法
          return this.dealDisabledDate(time)
        }
      }
}
方法// this.formData.effectPeriod 在data里面取不到报错,可以写到方法里面。
深度copy 处理数据;
//this.newObject = JSON.parse(JSON.stringify(data.effectPeriod));

 dealDisabledDate(time){
       return (
        time.getTime() + 8.64e7 < new Date(this.newObject[0]).getTime() ||
        time.getTime() - 8.64e7 >= new Date(this.newObject[1]).getTime()
      );
    },

第二种:选择当前月份+1

 <el-date-picker
  v-model="formParam.yearMonth"
   type="month"
   placeholder="选择月"
   value-format="yyyy-MM"
   :picker-options="pickerOptions"
   @change="handleChangeMonth">
 </el-date-picker>

data:{
      pickerOptions: {
        disabledDate(time) {
          let present = new Date(
            new Date().getFullYear() + "-" + (new Date().getMonth())
          ).getTime();

          let present_s = new Date(
            new Date().getFullYear() + "-" + (new Date().getMonth()+1)
          ).getTime();
          return time.getTime() >present_s ||time.getTime() <present
        },
      },


}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值