VUE相关

Element UI时间范围组件设置结束时间大于开始时间

2019-07-29  本文已影响0人  伴歌知行
  <!-- 时间范围 -->
  <el-form-item label="时间范围:" required>
    <el-col :span="11">
      <el-form-item prop="startTime">
        <el-date-picker
          type="datetime"
          placeholder="选择开始时间"
          v-model="startTime"
          style="width: 100%;"
          default-time="00:00:00"
          format="yyyy-MM-dd HH:mm"
          :picker-options="pickerOptionsStart"
        ></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col style="text-align: center;" :span="2">~</el-col>
    <el-col :span="11">
      <el-form-item prop="endTime">
        <el-date-picker
          type="datetime"
          placeholder="选择结束时间"
          v-model="endTime"
          style="width: 100%;"
          default-time="00:00:00"
          format="yyyy-MM-dd HH:mm"
          :picker-options="pickerOptionsEnd"
        ></el-date-picker>
      </el-form-item>
    </el-col>
  </el-form-item>

在data里设置picker-options

  data() {
    return {
      startime: "",
      endTime:"",
      pickerOptionsStart: {
        // 开始时间小于结束时间
        disabledDate: time => {
          let endTime = this.endTime;
          if (endTime) {
            return time.getTime() > new Date(endTime).getTime();
          }
        }
      },
      pickerOptionsEnd: {
        // 结束时间大于开始时间
        disabledDate: time => {
          let beginTime = this.startTime;
          if (beginTime) {
            return time.getTime() < new Date(beginTime).getTime();
          }
        }
      },
    };
  }
上一篇下一篇

猜你喜欢

热点阅读