iview的开始时间和结束时间

  let compareTime = (rule, value, callback) => {
      let startTimeNum = new Date(
        (this as any).headerForm.startTime == ''
          ? (this as any).headerForm.BeginDate
          : (this as any).headerForm.startTime
      ).getTime();

      let endTimeNum = new Date(
        (this as any).headerForm.endTime == ''
          ? (this as any).headerForm.EndDate
          : (this as any).headerForm.endTime
      ).getTime();

      if (startTimeNum > endTimeNum) {
        this.$message({
          type: 'info',
          message: '开始时间不能大于结束时间'
        });
        callback(new Error(' '));
      }
      callback();
    };







  headerForm: {
        BeginDate: '',
        EndDate: ''
      },
      headerFormrules: {
        BeginDate: [
          {
            required: true,
            type: 'date',
            message: ' ',
            trigger: 'change'
          },
          { validator: compareTime, trigger: 'change' }
        ],
        EndDate: [
          {
            required: true,
            type: 'date',
            message: ' ',
            trigger: 'change'
          },
          { validator: compareTime, trigger: 'change' }
        ]
      },

      pickerOptionsEnd: {
        disabledDate: time => {
          return this.pickerOptionsend(time);
        }
      },

      pickerOptionsStart: {
        disabledDate: time => {
          return this.pickerOptionsstart(time);
        }
      },

　

<el-form ref="headerForm" :model="headerForm" :rules="headerFormrules" label-width="80px">
 
 <el-form-item
      prop="BeginDate"
      label="起始时间"
    >
      <el-date-picker
        type="datetime"
        placeholder="选择日期"
        v-model="headerForm.BeginDate"
        format="yyyy-MM-dd"
        style="width: 100%;"
        @change="getStartTime"
        :picker-options='pickerOptionsStart'
      ></el-date-picker>
    </el-form-item>

    <el-form-item
      prop="EndDate"
      label="结束时间"
    >
      <el-date-picker
        type="datetime"
        placeholder="选择日期"
        v-model="headerForm.EndDate"
        format="yyyy-MM-dd"
        style="width: 100%;"
        :editable="false"
        @change="getEndTime"
        :picker-options='pickerOptionsEnd'
      ></el-date-picker>
    </el-form-item>
</el-form>

　　

　

 public pickerOptionsstart(time) {
    var that = <any>this;
    const data = that.$data;
    if (data.headerForm.EndDate == '') {
      return time.getTime() > Date.now();
    } else {
      let EndDateVal = new Date(data.headerForm.EndDate).getTime();
      if (EndDateVal) {
        return time.getTime() > EndDateVal || time.getTime() > Date.now();
      }
    }
  }

  public pickerOptionsend(time) {
    var that = <any>this;
    const data = that.$data;
    if (data.headerForm.BeginDate == '') {
      return time.getTime() > Date.now();
    } else {
      let beginDateVal = new Date(data.headerForm.BeginDate).getTime();
      if (beginDateVal) {
        return time.getTime() < beginDateVal || time.getTime() > Date.now();
      }
    }
  }

  public getStartTime(e) {
    const that: any = this;
    const data = that.$data;
    data.headerForm.startTime = e;
  }

  public getEndTime(e) {
    const that: any = this;
    const data = that.$data;
    data.headerForm.endTime = e;
  }

　　　　

 public pickerOptionsstart(time) {
    var that = <any>this;
    const data = that.$data;
    if (data.headerForm.EndDate == '') {
      return time.getTime() > Date.now();
    } else {
      let EndDateVal = new Date(data.headerForm.EndDate).getTime();
      if (EndDateVal) {
        return time.getTime() > EndDateVal || time.getTime() > Date.now();
      }
    }
  }

  public pickerOptionsend(time) {
    var that = <any>this;
    const data = that.$data;
    if (data.headerForm.BeginDate == '') {
      return time.getTime() > Date.now();
    } else {
      let beginDateVal = new Date(data.headerForm.BeginDate).getTime();
      if (beginDateVal) {
        return time.getTime() < beginDateVal || time.getTime() > Date.now();
      }
    }
  }

　　

转载于:https://www.cnblogs.com/LFxanla/p/11161733.html