在垫选择中禁用过去的时间段

Question

我正在使用 Mat Select 以 30 分钟的间隔显示所有时间段。

export const TIME=["12:00 AM","12:30 AM","01:00 AM","01:30 AM","02:00 AM","02:30 AM","03:00 AM","03:30 AM","04:00 AM","04:30 AM","05:00 AM","05:30 AM","06:00 AM","06:30 AM","07:00 AM","07:30 AM","08:00 AM","08:30 AM","09:00 AM","09:30 AM","10:00 AM","10:30 AM","11:00 AM","11:30 AM","12:00 PM","12:30 PM","01:00 PM","01:30 PM","02:00 PM","02:30 PM","03:00 PM","03:30 PM","04:00 PM","04:30 PM","05:00 PM","05:30 PM","06:00 PM","06:30 PM","07:00 PM","07:30 PM","08:00 PM","08:30 PM","09:00 PM","09:30 PM","10:00 PM","10:30 PM","11:00 PM","11:30 PM"];

现在我的要求是从当前时间 + 2 小时禁用所有过去的时间段。

我的代码

      <mat-select class="form-control" formControlName="pickupTime" placeholder="Select Time">
        <mat-option *ngFor="let time of times" [value]="time">
          {{time}}
        </mat-option>
      </mat-select>



 isDisableTime(selectedTime: string): boolean {
    if (moment(this.oneWayFormGroup.get('pickupDate').value).isSame(Date.now(), 'day')) {
      let isTimeOver = false;
      let currentHour = new Date().getHours() + 2;
      let currentMin = new Date().getMinutes();
      let currentAmPm = currentHour >= 12 ? 'PM' : 'AM';
      currentHour = currentHour % 12;
      let selectedHour = +selectedTime.substr(0, 2) % 12;
      let selectedMin = +selectedTime.substr(3, 2);
      let selectedAM_PM = selectedTime.substr(6, 2);
      if (currentAmPm === selectedAM_PM) {
        if (selectedHour < currentHour) {
          isTimeOver = true;
        } else if (selectedHour === currentHour) {
          if (selectedMin < currentMin) {
            isTimeOver = true;
          }
        }
      } else {
        isTimeOver = currentAmPm > selectedAM_PM;
      }
      return isTimeOver;
    } else {
      return false
    }
  }

现在的问题是，如果当前时间是晚上 11 点，所有 AM 时间段都被禁用。

下面是stackblitz链接供参考

https://stackblitz.com/edit/angular-uekaan

Answer 1

Ts 代码：

isDisableTime(selectedTime: string): boolean {
    let isTimeOver = false;
    let currentHour = new Date().getHours();
    let currentMin = new Date().getMinutes();
    let currentAmPm = currentHour >= 12 ? 'PM' : 'AM';
    currentHour = currentHour % 12;
    let selectedHour = +selectedTime.substr(0, 2) % 12;
    let selectedMin = +selectedTime.substr(3, 2);
    let selectedAM_PM = selectedTime.substr(6, 2);
    if(currentAmPm === selectedAM_PM) {
      if (selectedHour < currentHour) {
        isTimeOver = true;
      } else if (selectedHour === currentHour) {
        if (selectedMin < currentMin) {
          isTimeOver = true;
        }
      }
    } else {
      isTimeOver = currentAmPm > selectedAM_PM;
    }
    return isTimeOver;
  }

HTML代码：

<mat-select class="form-control" formControlName="pickupTime" placeholder="Select Time">
        <mat-option *ngFor="let time of times" [value]="time" [disabled]="isDisableTime(time)">
          {{time}}
        </mat-option>
      </mat-select>