el-date-picker type="date" 日期组件,开始时间、结束时间(结束时间大于等与开始时间)

89 阅读1分钟

微信图片_20240115093620.png

html

<template>
  <el-form ref="form" :model="formData" label-width="80px">
    <el-form-item label="开始日期" prop="start_time">
      <el-date-picker v-model="formData.start_time" type="date" value-format="yyyy-MM-dd" :picker-options="pickerOptionsStart" placeholder="选择日期"> </el-date-picker>
    </el-form-item>

    <el-form-item label="结束日期" prop="end_time">
      <el-date-picker v-model="formData.end_time" type="date" value-format="yyyy-MM-dd" :picker-options="pickerOptionsEnd" placeholder="选择日期"> </el-date-picker>
    </el-form-item>
  </el-form>
</template>

js

<script>
export default {
  data() {
    return {
      formData: {
        start_time: "",
        end_time: ""
      },
      pickerOptionsStart: {
        disabledDate: (time) => {
          let endDateVal = this.formData.end_time;
          if (endDateVal) {
            return time.getTime() >= new Date(endDateVal).getTime(); // 如果后面没有-8.64e7就不可以选择今天的
          }
        }
      },
      pickerOptionsEnd: {
        disabledDate: (time) => {
          let beginDateVal = this.formData.start_time;
          if (beginDateVal) {
            return time.getTime() <= new Date(beginDateVal).getTime() - 8.64e7; // 如果后面有-8.64e7就可以选择今天的
          }
        }
      }
    };
  }
};
</script>

                <el-form-item label="开始时间" prop="plan_start_time">
                    <el-date-picker
                      v-model="drawerData.plan_start_time"
                      style="width: 86%"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      type="datetime"
                      size="mini"
                      @change="resetEnd_time"
                    >
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="结束时间" prop="plan_end_time">
                    <el-date-picker
                      v-model="drawerData.plan_end_time"
                      :picker-options="pickerOption()"
                      style="width: 86%"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      type="datetime"
                      size="mini"
                    >
                    </el-date-picker>
                </el-form-item>


    pickerOption() {
      if (this.drawerData.plan_start_time != undefined) {
        let date = new Date(this.drawerData.plan_start_time);
        let minutes = date.getMinutes() + 1;
        //  h和m 是将日期只取时分
        let h = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
        let m = minutes < 10 ? "0" + minutes : minutes;
        // pickerDate 判断当前选择时间是否等于上条数据时间
        // 若等于时,限制时间从00:00:00 - 上条数据开始时间,不等于时,24小时可选
        let pickerDate = date.toDateString() === new Date(this.drawerData.plan_start_time).toDateString();
        return {
          // 日期限制
          disabledDate: (time) => {
            let old = this.drawerData.plan_start_time;
            return time.getTime() < new Date(old).getTime() - 8.64e7;
          },
          // 时间限制
          selectableRange: pickerDate ? h + m + ":00 - 23:59:59" : "00:00:00 - 23:59:59",
        };
      }
    },