CODEWITHSUNDEEP
angularprimengprimeng-calendar
Ben P
Ben P

Reputation: 197

PrimeNG TimeOnly Calendar: Cannot Select default time intuitively

I am using this PrimeNG timeonly calendar:

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

I am setting start default hour to 9:00 AM

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

Now when I open widget I cannot select 9:00 AM. Either I have to select carrots to select 9:01 and then move back to 09:00 AM again. This does not look very intuitive.

enter image description here

Is there a way to click on below box(highlighted in red box) to select time

enter image description here

Currently using PrimeNG 8 with Angular 8.

Thanks in advance.

Upvotes: 3

Views: 2500

Answers (1)

Ben P
Ben P

Reputation: 197

After so many days looking into it. I can not see any solution provided by PrimeNG community. Best workaround for this kind of scenario is to set default date when user clicks on the textbox. For this purpose PrimeNG provide onFocus event.In template set like this:

  <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>

In component set the default time.

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

Upvotes: 4

Related Questions