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();
}

Nagranie.z.ekranu.2024-03-21.o.21.07.38.mov

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!

[mehmetcetin01140]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you open a new issue so we can include it in our roadmap?

Thanks a lot for your understanding!
Best Regards,