el-date-picker 的时间范围跨度设置

<template>
  <div>
    <div class="block">
      <h2>日期 365 天</h2>
      <el-date-picker
        :picker-options="pickerOptions1"
        v-model="value1"
        type="daterange"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        range-separator="~"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      ></el-date-picker>
    </div>
    <div class="block">
      <h2>月份 12 个月</h2>
      <el-date-picker
        :picker-options="pickerOptions2"
        v-model="value2"
        type="monthrange"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        range-separator="~"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      ></el-date-picker>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerMinDate1: "",//第一次选中的时间
      value1: "",
      pickerOptions1: {
        onPick: obj => {
          this.pickerMinDate1 = new Date(obj.minDate).getTime();
        },
        disabledDate: time => {
          if (this.pickerMinDate1) {
            const day1 = 365 * 24 * 3600 * 1000;
            let maxTime = this.pickerMinDate1 + day1;
            let minTime = this.pickerMinDate1 - day1;
            return time.getTime() > maxTime || time.getTime() < minTime;
          }
        }
      },
      
      pickerMinDate2: "",//第一次选中的时间
      value2: "",
      pickerOptions2: {
        onPick: obj => {
          this.pickerMinDate2 = new Date(obj.minDate).getTime();
        },
        disabledDate: time => {
          if (this.pickerMinDate2) {
            const day2 = 365 * 24 * 3600 * 1000;
            let maxTime = this.pickerMinDate2 + day2;
            let minTime = this.pickerMinDate2 - day2;
            return time.getTime() > maxTime || time.getTime() < minTime;
          }
        }
      },
    };
  },
  mounted() {
    
  },
  methods: {
    dateChange() {
      console.log(this.value1[0], '-----', this.value1[1]);
    }
  },
};
</script>
<style scoped>
</style>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值