Calendar needs double click when minDate/ MaxDate property is set.

[dlinx]

There is no guarantee in receiving a response in GitHub Issue Tracker, If you'd like to secure our response, you may consider PrimeNG PRO Support where support is provided within 4 business hours

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
Please fork the plunkr below and create a case demonstrating your bug report. Issues without a plunkr have much less possibility to be reviewed.

http://plnkr.co/edit/ZXkmtf1OFKmQokyEdmwa?p=preview

Current behavior

When minDate or maxDate property is set, calendar needs two clicks to select date.
Expected behavior

It should select date in single click.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Angular version: 4.2.4

• PrimeNG version: 4.3.0

• Browser: [ Chrome 62.0.3202.94]

• Language: [all]

• Node (for AoT issues): node --version =

[Merve7]

Please see plunker (http://plnkr.co/edit/1D1LY2Gtb6nXrFUOZm6G?p=preview), please remove minDate function and add ngOnInit because component always check maxDate value

[kareljan]

I'm still having this problem. Sometimes you just want a function in the min and max date options. When you do, you have to click twice to select a date.
An stackblitz example of the problem.
https://stackblitz.com/edit/angular-gxjjar?file=src%2Fapp%2Fapp.component.ts

[kareljan]

Can we reopen this?

[chrispinzaru]

@Merve7 Why did you close this issue? The issue is still reproducible.

[kareljan]

I've updated my stackblitz example to v6.1.4. The problem is still there.
https://stackblitz.com/edit/angular-dzrwe7
It seems like you first have to activate the calendar in order for it to respond to your second click.
@Merve7 Please reopen this issue.

[chrispinzaru]

@kareljan You are totally right that it still doesn't work as expected, but as @Merve7 said - you should NOT provide functions calls for minDate/maxDate property values.
I forked your stackblitz example and fixed the issue by binding minDate/maxDate to object key values (primitive!)
https://stackblitz.com/edit/angular-4oyncc
Unfortunately I can't help fixing this issue when using function return statements for setting minDate/maxDate.
@Merve7 As I see some guys still need ability to use function calls on minDate/maxDate so that it's calculated dynamically. Any clues how to achieve this?

[tranthoai]

I use the latest Primeng 8.0.1 and this issue still happend, please reopen and fix it. Thank you so much ^^

[mertsincan]

Hi everyone,

We'll check and get back to you.

Best Regards,

[chrispinzaru]

@tranthoai Hello there, I managed to fix this in a project I worked on, but I need some time to remind myself how I did it.
As I remember I've been using properties (variables) instead of functions, is that possible for you to do the same way?.
Also, please create a stackblitz example if you can, that would help very muh.
I will come back with the details. Thank you.

[cagataycivici]

This is expected, when a getter is bound, clicking the date cell reruns the change detection and Angular replaces it with the new dom because minDate and maxDate changes causes dom updates, so after first click the cell is gone so click is not executed, at second click the cell is there so it is triggered.

Solution is using property values as https://stackblitz.com/edit/angular-4oyncc

[shinde-prasad]

@cagataycivici I am still facing the same issue. can you please make it simple like have single calender and its min and max date for e.g: is between 1954 to 2009

[cheezyXx]

Does it work with reactive forms? I can't get it. It is quite annoying behavior. When I change month and then click on a day, it works. When I only click on a day, I have to do it twice.

Solution: As above. Move it to property. Getter or function doesn't work.

[alehro]

This is expected, when a getter is bound, clicking the date cell reruns the change detection and Angular replaces it with the new dom because minDate and maxDate changes causes dom updates, so after first click the cell is gone so click is not executed, at second click the cell is there so it is triggered.

Solution is using property values as https://stackblitz.com/edit/angular-4oyncc

Alternative approach and additional explanation for anybody still struggling with it. The issue happens because the min/max binding changes value. In my case I have many date pickers (p-calendar) on a page. Each next date picker should allow only dates after the date selected in previous control. I don't want to define getter and additional field for every control. So, the solution I found is to use memoization from lodash-decorators-esm package. This way my function does not return new object if there was no real change of the value.

@Memoize((item: Date) => {
      return item?.toString();
  })
  public getNextDay(day: Date) {
      if (!day) return day;
      return moment(day).add(1, 'day').toDate();
  }

Then use it like this:
[minDate]="dateHelper.getNextDay(model?.somePreviousField)"