设置element 日期时间组件 的选中范围

1、html代码

点击查看代码

 <el-form-item v-if="edit_temp.validTimeType == '1'" label="考试开始时间" prop="examStartTime">
          <el-date-picker v-model="edit_temp.examStartTime" type="datetime" style="width: 300px;" value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="beginDate()" :disabled="xiugai.flag == true" :default-time="hms(new Date().getTime())" />
        </el-form-item>
        <el-form-item v-if="edit_temp.validTimeType == '1'" label="考试结束时间" prop="examEndTime">
          <el-date-picker v-model="edit_temp.examEndTime" type="datetime" style="width: 300px;" value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="processDate()" :default-time="hms(new Date().getTime())" />
        </el-form-item>

2、methods代码

点击查看代码

// 获取时分秒
hms(timestamp) {
    if (!timestamp) {
      return "";
    }
    var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
    // var Y = date.getFullYear() + '-';
    // var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
    // var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
    var h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
    var m = (date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes()) + ':';
    var s = (date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds());
    console.log( h+m+s);
    return h+m+s;
    // return Y + M + D;
  },
	
 beginDate() {
    const self = this;
    return {
        // 限制年月日
      disabledDate(time) {
        if (self.edit_temp.examEndTime) {  //如果结束时间不为空，则小于结束时间,且大于当前时间
          return new Date(self.edit_temp.examEndTime).getTime() < time.getTime() || time.getTime() < Date.now() - 1000 * 3600 * 24
        } else {
          return time.getTime() < Date.now() - 1000 * 3600 * 24//开始结束不选时，开始时间最大值大于等于当天
        }
      },
      // 限制时分秒
      selectableRange: self.detailTimeBegin(),
    }
  },
 processDate() {
    const self = this;
    return {
      // 限制年月日
      disabledDate(time) {
        if (self.edit_temp.examStartTime) {  //如果开始时间不为空，则结束时间大于开始时间
          return new Date(self.edit_temp.examStartTime).getTime() > time.getTime() + 1000 * 3600 * 24
        } else {
          return time.getTime() < Date.now() - 1000 * 3600 * 24//开始时间不选时，结束时间最大值大于等于当天
        }
      },
      // 限制时分秒
      selectableRange: self.detailTimeEnd()
    }
  },
    detailTimeBegin(){
      let endTime = '23:59:59'
      let time = '00:00:00'
      // 如果有结束时间
      if(this.edit_temp.examEndTime){
        if(formateDateYmd(this.edit_temp.examEndTime) == formateDateYmd(this.edit_temp.examStartTime)){
          endTime = formateDate(this.edit_temp.examEndTime).substring(11)
        }
      }
      if(formateDateYmd(this.edit_temp.examStartTime) == formateDateYmd(new Date().getTime())){
        time = formateDate(new Date().getTime()).substring(11)
      }

      console.log('时分秒1',time+'-'+endTime);
      return time +'-'+endTime
    },
    detailTimeEnd(){
      let time = '00:00:00'
      // 如果有开始时间
      if(this.edit_temp.examStartTime){
        if(formateDateYmd(this.edit_temp.examEndTime) == formateDateYmd(this.edit_temp.examStartTime)){
          time = formateDate(this.edit_temp.examStartTime).substring(11)
        }
      }else{
        if(formateDateYmd(this.edit_temp.examEndTime) == formateDateYmd(new Date().getTime())){
          time = formateDate(new Date().getTime()).substring(11)
        }
      }
      console.log('时分秒2',time+'-'+'23:59:59');
      return time+'-'+'23:59:59'
    },