开始时间-结束时间

发布时间 2023-03-30 15:41:53作者: 倍姬存希

效果

点击开始时间之后,选择结束时间,前面的时间都置灰

 页面

<el-form-item label="上传时间:">
            <div style="line-height: 28px">
              <el-date-picker
                v-model="queryForm.createTimeStart"
                size="small"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择开始时间"
                :picker-options="pickerOptionsStart"
              ></el-date-picker
              > -
              <el-date-picker
                v-model="queryForm.createTimeEnd"
                size="small"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择结束时间"
                :picker-options="pickerOptionsEnd"
              ></el-date-picker>
            </div>
          </el-form-item>

data中定义

      pickerOptionsStart: {
        disabledDate: (time) => {
          let endDateVal = this.queryForm.createTimeEnd;
          if (endDateVal) {
            return time.getTime() > new Date(endDateVal).getTime();
          }
        },
      },
      pickerOptionsEnd: {
        disabledDate: (time) => {
          let beginDateVal = this.queryForm.createTimeStart;
          if (beginDateVal) {
            return time.getTime() < new Date(beginDateVal).getTime();
          }
        },
      },