p calendar readonly not working in primeng

Question

<p-calendar readonly="true" [showTime]="true" inputId="time" [hourFormat]="24" [minDate]="minDate" [maxDate]="tomorrow" inputId="range" [(ngModel)]="obj.date" formControlName="selectedDateTime">

Answer 1

Readonly property doesn't exist in p-calendar. You can use the "disabled" property instead.

    <p-calendar 
    disabled="true" 
    [showTime]="true" 
    inputId="time" 
    [hourFormat]="24" 
    [minDate]="minDate" 
    [maxDate]="tomorrow" 
    inputId="range" 
    [(ngModel)]="obj.date" 
    formControlName="selectedDateTime"></p-calendar>

Answer 2

Use [readonlyInput]="true" instead of readonly="true"

Note - readonlyInput when specified, prevents entering the date manually with keyboard. Default value is null

Reference - https://www.primefaces.org/primeng/showcase/#/calendar

Answer 3

I think when readonlyInput is true must be showOnFocus false Please see link https://github.com/primefaces/primeng/issues/10880