Keep currentYear and currentMonth in sync with the control value

[csabasimon]

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

Current behavior

When setting the calendar's value through the formControl (either calling setValue or typing in the input field), the calendar's currentMonth and currentYear don't get updated. This leads to an unexpected behavior when using previous/next month buttons. Since those buttons rely on the currentMonth/year, the calendar will jump to the previous/next month prior to today's date.

eg.:

1. Set the formControl's value to 2010.01.01
2. Open the calendar, it correctly shows the dates for 2010 january.
3. Press 'next month' button
4. Calendar will jump to 2018 september

As a workaround we're setting the calendar's currentYear and currentMonth on the onFocus event, but I think they should be kept automatically in sync with the control's value.

Expected behavior

Setting the date through the formControl should behave the same way as selecting a date from the calendar, so the currentMonth and year should be set.

eg.:

1. Set the formControl's value to 2010.01.01
2. Open the calendar, it correctly shows the dates for 2010 january.
3. Press 'next month' button
4. Calendar should jump to 2010 february

• Angular version: 6.0

• PrimeNG version: 6.0

• Browser: [all]

• Language: [all]

[ctobe-eagleinvsys]

Any updates on this? It would be great to have this fixed. The calendar jumps when you try to use it after setting through the form.

[ctobe-eagleinvsys]

@csabasimon can you share your work-around code to set those values on focus? From event.target how do i set those values? Thanks!

[ghost]

+1 any update on this? we need this resolved ASAP

[csabasimon]

@ctobe-eagleinvsys

.ts file

@ViewChild('calendar') calendar: Calendar;

setCurrentDate(calendar: Calendar): void {
    if (!isNull(calendar.value)) {
      calendar.currentYear = calendar.value.getFullYear();
      calendar.currentMonth = calendar.value.getMonth();
    }
}

.html

<p-calendar #calendar 
    ...
    (onFocus)="setCurrentDate(calendar)">
</p-calendar>

[ctobe-eagleinvsys]

@csabasimon you rock! This was really helpful. That fixed our issue. In case anyone is using date range...

if (!isNull(calendar.value)) {
      if (calendar.value.constructor === Array) {
        calendar.currentYear = calendar.value[0].getFullYear();
        calendar.currentMonth = calendar.value[0].getMonth();
      } else {
        calendar.currentYear = calendar.value.getFullYear();
        calendar.currentMonth = calendar.value.getMonth();
      }
}

[adienger]

We're also having this problem with the calendar widget.

[cagataycivici]

Please demonstrate your case at stackblitz by using the issue template below. Issues without a test case have much less possibility to be reviewd in detail and assisted.

https://stackblitz.com/github/primefaces/primeng-issue-template

[cagataycivici]

#6393