欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue+elementui 只能选7天内的日期

程序员文章站 2024-03-11 16:31:55
...

html: 

   <el-col :span="2">查询时间</el-col>
      <el-col :span="6">
        <el-date-picker
          v-model="checkParams.startDate"
          type="date"
          placeholder="开始时间"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          style="width:45%"
          :picker-options="pickerStart"
        />
        <span style="padding: 0 1%;">至</span>
        <el-date-picker
          v-model="checkParams.endDate"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="结束时间"
          style="width:45%"
          :picker-options="pickerEnd"
        />
      </el-col>

js:

 data() {
    const _this = this;
    const dateScope = 7 * 24 * 3600 * 1000;
    return {
      pickerStart: {
        disabledDate(time) {
          if (_this.checkParams.endDate != "") {
            /**
             * 如果另一个框有值,就只能选7天内的日期
             *
             */
            let date = new Date(_this.checkParams.endDate).getTime();
            return (
              time.getTime() < date - dateScope ||
              time.getTime() > dateScope + date
            );
          }
          return time.getTime() > Date.now();
        }
      },
      pickerEnd: {
        disabledDate(time) {
          if (_this.checkParams.startDate != "") {
            let date = new Date(_this.checkParams.startDate).getTime();
            return (
              time.getTime() < date - dateScope ||
              time.getTime() > dateScope + date
            );
            return;
          }
          return time.getTime() > Date.now();
        }
      },}

 

相关标签: vue2.0 element