关于el-date-picker选择时间不能大于当前时间

150 阅读1分钟
          <el-date-picker
            v-model="form.patrolTime"
            :picker-options="pickerOptionsStart"
            type="datetime"
            placeholder="选择巡查时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            :disabled="edit"
          >
          </el-date-picker>
          data:{
            pickerOptionsStart: {
                disabledDate: (time) => {
                  return time.getTime() > Date.now()
                },
                selectableRange: '00:00:00 - 23:59:59'
              }
          }
          watch:{
                  //巡查时间不能大于当前时间
'form.patrolTime': {
  handler(selectTime) {
    const date = new Date(new Date(selectTime).setHours(0, 0, 0, 0)).getTime() 
    const today = new Date(new Date().setHours(0, 0, 0, 0)).getTime() 
    const curTime = new Date() 
    if (date >= today) {
      // 当选择的日期就是当天的时候,这个时候就要限制时间应当小于此时此刻的时分秒
      this.pickerOptionsStart.selectableRange = `'00:00:00 - ${String(curTime.getHours()).padStart(2, '0')}:${String(curTime.getMinutes()).padStart(2, '0')}:${String(curTime.getSeconds()).padStart(2, '0')}` 
    } else {
      // 当选择的日期小于当天的时候,这时需要把时分秒的限制放开,否则不能选择
      this.pickerOptionsStart.selectableRange = '00:00:00 - 23:59:59'
    }
  },
  immediate: true,
  deep: true
},
          }