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

  <!-- 时间范围 -->
  <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();
          }
        }
      },
    };
  }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容