如何禁用 PrimeNG p 日历中的过去时间？

Question

已经有一个问题：-

如何禁用 angular p 日历中的过去日期？

但我也想禁用（或阻止）过去的时间。 例如，如果现在是 14:00 Hrs，那么用户应该不能输入任何小于该时间的内容。 甚至没有 13:59 小时。 为了防止过去的日期，他们有一个叫做minDate的东西，我已经在使用它，但没有什么可以限制时间。

我首先尝试了这个：

HTML：

<p-calendar (onInput)="onInput($event)" [minDate]="minDate" [showTime]="true" hourFormat="24">
</p-calendar>

TS：

onInput(e) {
  console.log('Event: ', e);
}

但是这样我就无法捕获字段值：

所以我尝试了另一种方法，灵感来自这两个问题：

如何从primeNG中获取输入值？

比较两个日期与 JavaScript

HTML：

<p-calendar #myCalender (onInput)="onInput($event,myCalender)" ...>
</p-calendar>

TS：

onInput(e, mc) {
  console.log('Value: ', mc.inputFieldValue);
  const enteredDate = mc.inputFieldValue;
  if (enteredDate.getTime() > new Date().getTime()) {
    console.log('previous date');
    // disable Apply button and apply red border css
  } else {
    console.log('future date');
    // enable Apply button and remove red border css
  }
}

这次我每次输入时都能得到值，但我仍然需要比较日期逻辑的帮助。 我的逻辑不能正常工作。 请投入。

Answer 1

仅仅设置minDateValue = new Date()就足够了吗？ Date obj 考虑时间和日期。

编辑

---

我添加了onBlur() function，以检查输入的日期是否小于允许的日期。 如果是这样，则将其更改回最小值。 如果需要，这可以扩展为自定义表单验证器，但要点是相同的。 可能您的 function 不起作用的原因是因为库发出 ISO 日期字符串，而不是 Date obj。 日期 obj 可与<进行比较。 我使用 onBlur 以便用户有时间完成输入，否则我们将立即覆盖输入侦听器而不给用户更改输入日期。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  selectedDate: any;
  minDateValue = new Date();

  onBlur() {
    if (
      this.dateIsValid(new Date(this.selectedDate)) &&
      new Date(this.selectedDate) < this.minDateValue
    ) {
      this.selectedDate = this.minDateValue;
      console.warn('Overwriting date!');
    }
    console.log(this.selectedDate);
  }

  dateIsValid(date) {
    if (
      typeof date === 'object' &&
      date !== null &&
      typeof date.getTime === 'function' &&
      !isNaN(date)
    ) {
      return true;
    }

    return false;
  }
}

 <h5>Popup Mindate now()</h5>
<div class="p-fluid p-grid p-formgrid">
  <div class="p-field p-col-12 p-md-4">
    <label for="time">Time</label>
    <p-calendar
      [(ngModel)]="selectedDate"
      (onBlur)="onBlur()"
      [minDate]="minDateValue"
      [showTime]="true"
      inputId="time"
    ></p-calendar>
  </div>
</div>

工作演示： https://stackblitz.com/edit/primeng-calendar-demo-g2vyki?file=src%2Fapp%2Fapp.component.html