el日期组件,日期中间间隔时间设定

heml
       <FormItem prop="createTimes" label="领券时间">
        <el-date-picker
          v-model="queryForm.createTimes"
          type="daterange"
          ref="timeBox"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          @change="resetDate"
          clearable
          format="yyyy-MM-dd"
        >
        </el-date-picker>
      </FormItem>
js
//data里定义最大日期和最小日期,和时间限定规则
pickMinDate: "",
pickMaxDate: "",
pickerOptions: {
        disabledDate: (time) => {
          //定义间隔时间
          const day31 = (31 - 1) * 24 * 3600 * 1000; 
          //进行时间判断
          if (this.pickMinDate)
            if (this.pickMinDate !== "" && !this.pickMaxDate) {
              let maxTime = this.pickMinDate + day31;
              if (maxTime > new Date()) {
                maxTime = new Date();
              }
              let minTime = this.pickMinDate - day31;

              return (
                time.getTime() > maxTime ||
                time.getTime() > Date.now() ||
                time.getTime() < minTime
              );
            }
          if (this.pickMaxDate !== "" && this.pickMinDate !== "") {
            let minTime = this.pickMaxDate - day31;
            let maxTime = this.pickMinDate + day31;

            if (maxTime > new Date()) {
              maxTime = new Date();
            }
            return time.getTime() < minTime || time.getTime() > maxTime;
          }
          return time.getTime() > Date.now();
        },
        onPick: ({ maxDate, minDate }) => {
          this.pickMinDate = minDate.getTime();
          if (maxDate) {
            this.pickMaxDate = maxDate.getTime();
            console.log(this.queryForm.createTimes);
          }
          console.log("maxDate=" + this.pickMaxDate);
          console.log("minDate=" + this.pickMinDate);
        },
      },

//methods里写方法
   //时间初始化
    resetDate() {
      console.log(
        "come h" + this.queryForm.createTimes,
        typeof this.queryForm.createTimes
      );
      this.pickMinDate = "";
      this.pickMaxDate = "";
    },
   //时间格式化
    formatDate(date) {
      let yyyy = date.getFullYear();
      let MM = 1 + date.getMonth();
      let dd = date.getDate();
      let hh = date.getHours();
      let mm = date.getMinutes();
      let ss = date.getSeconds();
      MM = ("0" + MM).slice(-2);
      dd = ("0" + dd).slice(-2);
      hh = ("0" + hh).slice(-2);
      mm = ("0" + mm).slice(-2);
      ss = ("0" + ss).slice(-2);
      return `${yyyy}-${MM}-${dd}`;
    },
    
//时间引用

 startTimes:
          this.queryForm.createTimes && this.queryForm.createTimes.length > 0
            ? this.formatDate(new Date(this.queryForm.createTimes[0])).slice(
                0,
                10
              )
            : "",
  endTimes:
          this.queryForm.createTimes && this.queryForm.createTimes.length > 1
            ? this.formatDate(new Date(this.queryForm.createTimes[1])).slice(
                0,
                10
              )
            : "",

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值