element 日期选择器区间控制

最新推荐文章于 2024-05-19 16:51:01 发布

m0_59344412

最新推荐文章于 2024-05-19 16:51:01 发布

阅读量114

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/m0_59344412/article/details/126989087

版权

 <el-col :span="10" :offset="1">
            <el-form-item label="出票日期" prop="issueBillDate" label-width="120px">
              <el-date-picker @change="issueBillDateChange" :picker-options="pickerOptions1"
                v-model="dialogData.issueBillDate" type="date" placeholder="请选择" value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="1">
            <el-form-item label="到期日期" prop="billMaturityDate" label-width="120px">
              <el-date-picker :picker-options="{disabledDate}" v-model="dialogData.billMaturityDate" type="date"
                placeholder="请选择" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="10" :offset="1">
            <el-form-item label="票据签收日期" prop="billSigningDate" label-width="120px">
              <el-date-picker :picker-options="{disabledDate}" v-model="dialogData.billSigningDate" type="date"
                placeholder="请选择" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>

  // 出票日期 不能早于当前日期
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },

disabledDate(time) {
      // 一天的时间戳
      const day1 = 24 * 60 * 60 * 1000;
      //时间节点
      const valtime = parseInt(time.getTime());
      // 获取出票日期的时间戳
      const startTime = this.$dayjs(this.dialogData.issueBillDate, "YYYYMMDD").valueOf() + day1;
      // 获取到期日期的时间戳
      const billMaturityDate = this.$dayjs(this.dialogData.billMaturityDate, "YYYYMMDD").valueOf() - day1;
      // 到期日期必须大于出票日期  票据签收日期不能小于出票日期并且不能大于到期日期
      return valtime < startTime || billMaturityDate < valtime && billMaturityDate > startTime;
    },