Calendar: Not working when minDate is set

[sebastiangorski]

Describe the bug

I'm using Calendar component on my page. When I don't provide either mindate or maxDate, everything works fine. However, when I bind the date to minDate attribute, the Calendar component opens, but is not reacting to clicks. I can't select a day, I can't change month nor year. Please see attached video.

There is a hover effect on day cells, but once I click, it's not reacting to anything.

Here is how I set the date:

HTML Template:

<p-calendar
    [formControlName]="stepInput.label"
    [minDate]="getTodayDate()"
    dateFormat="dd.mm.yy"
></p-calendar>

Component TS file:

protected getTodayDate(): Date {
    return new Date();
}

https://github.com/primefaces/primeng/assets/44788859/50b7dfd7-1ff2-48b2-9e61-8255558688a0

Environment

localhost Angular app

Reproducer

No response

Angular version

17.3.1

PrimeNG version

12.12.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.17.1

Browser(s)

Chrome

Steps to reproduce the behavior

1. Set minDate attribute on Calendar component
2. Open component to select date
3. Observe it's not clickable

Expected behavior

Calendar component opens and I am able to select dates excluding the ones matching minDate or maxDate.

[maruthumj]

@sebastiangorski you cannot not pass a function directly to the minDate property since minDate's data type is "Date" only. you should create a date variable and have to pass it to the minDate. hope this is helpful!