Календарь PrimeNG TimeOnly: невозможно выбрать время по умолчанию интуитивно - PullRequest
Новая
       36

Календарь PrimeNG TimeOnly: невозможно выбрать время по умолчанию интуитивно

0 голосов
/ 15 апреля 2020

Я использую этот календарь PrimeNG только для времени: 

    <p-calendar  id="startHour" name="startHour" [defaultDate]="startHourDefault"  [(ngModel)]="startHourValue" [timeOnly]="true" hourFormat="12" [inline]="false" 
placeholder="Select start hour"  [disabled]="IsDisabled"></p-calendar>

Я устанавливаю часы по умолчанию на 9:00 AM 

var today = new Date();
    this.startHourDefault= new Date(today.getFullYear(), today.getMonth(), today.getDate(), 9, 0, 0);

Теперь, когда я открываю виджет, я не могу выбрать 9: 00:00 Либо я должен выбрать морковь, чтобы выбрать 9:01, а затем снова вернуться к 09:00. Это выглядит не очень интуитивно.

enter image description here

Есть ли способ щелкнуть мышью в поле ниже (выделено красным), чтобы выбрать время

enter image description here

В настоящее время используется PrimeNG 8 с Angular 8.

Заранее спасибо.

1 Ответ

0 голосов
/ 23 апреля 2020

После стольких дней изучения. Я не вижу никакого решения, предоставленного сообществом PrimeNG. Лучший обходной путь для такого сценария - установить дату по умолчанию, когда пользователь нажимает на текстовое поле. Для этого PrimeNG предоставляет событие onFocus. В шаблоне устанавливается следующее: 

  <p-calendar  id="startHour" name="startHour" [defaultDate]="startHourDefault"  [(ngModel)]="startHourValue" [timeOnly]="true" hourFormat="12" (onFocus)="selectDefaultDate()" [inline]="false" 
placeholder="Select start hour"  [disabled]="IsDisabled" ></p-calendar>

В компоненте устанавливается время по умолчанию. 

selectDefaultDate(){
if(!this.startHourValue)
this.startHourValue=this.defaultDate;
}
...