bug: Setting ion-datetime value programatically does not update the grid

[charlesj1]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

If you change the value of an ion-datetime programatically, and then open the ion-datetime, the calendar grid still displays the month/year of the old date.

E.g. if you programatically change the date from today to May 5, 2022, and then open the ion-datetime, the calendar grid will show today's month instead of May 2022 (if you do then navigate to May 2022, you will see that May 5 is correctly selected, but it should have opened there in the first place)

Expected Behavior

Upon opening the ion-datetime, I would expect the calendar grid to initially display the month/year of the selected date.

Steps to Reproduce

1. Start with an ion-datetime, which defaults to today's date
2. After 4 seconds, programatically update the date to May 5, 2022
3. Open the date picker
   The date picker shows the current month, instead of showing May 2022
   (if you navigate back to May 2022, you will see that May 5 is highlighted as expected, but the date picker should have opened in that month to start with)

Code Reproduction URL

https://stackblitz.com/edit/angular-ramjpp-zz9vub?file=package.json

Ionic Info

Stackblitz

Additional Information

Prior to 6.3.2, the selected date was not updated either. This was reported in #25776, and I have used that as a template for this issue. Although the selected date does now get updated, the calendar grid does not open to the correct month, hence this new issue.

[liamdebeasi]

Thanks for the report. I can reproduce this behavior, but things appear to be working as intended. When the value changes asynchronously, we intentionally do not jump the datetime to that selected value. The reason is that if a user is swiping through January 2022 and the applications sets the value to March 2021, jumping the calendar view to March can be disorienting for the user since the component changed without them doing anything.

In other words, once the datetime picker has been rendered for the first time, changes to the "working" state of the datetime must be done by user gestures. The working state in this case is the month that the user is viewing.

Is there a reason why you need the date picker to jump back to the selected value?

[charlesj1]

Thanks for the quick response. I'm trying to migrate from Ionic 5, so my scenarios are more like ion-datetime-button...i.e. I want to just show the selected date, and then tapping it should open the overlay.

First scenario is that I have arrow icons next to the date that let the user quickly go forward or back a day, with the option of tapping the date to open the overlay. The trouble is that if they use the arrow icons to go from Nov 30 to Dec 1, and then open the overlay, it is still set in November.

Second scenario is a profile page that displays their birthday, something like:
<ion-datetime value={this.birthday}></ion-datetime>.
They can switch their profile to a different family member, which changes the birthday. But if they then open the overlay, the month is still set to the last family member's birthday.

I guess I'm not using ion-datetime as intended in Ionic 6. Perhaps I should be creating a new ion-datetime with the appropriate date every time the overlay gets opened.

[ReneZeidler]

I am using an ion-datetime-button with an ion-datetime inside a popover. The value of the datetime is bound to a form value, which can be changed programmatically (due to user actions elsewhere on the form).

When setting the value programmatically, the value of the datetime and display text of the datetime button change as expected. But if the user clicks on the button, the displayed month is that of the initial (or last displayed) value, not the currently set value. This goes against against the user's expectation, because for the user the datetime picker is a completely new one each time the button is clicked. I agree that the displayed month should never be changed while the picker is visible.

As far as I can tell, ion-datetime already tracks whether it is hidden in a popover or modal. In my opinion, the best UX would be for the state of the datepicker to be reset when it is hidden, so that the next time it is opened, the month of the selected date is shown.

[ReneZeidler]

As an addition, this issue not only affects the calendar grid, it also affects wheels, where it is arguably even more of an issue.

To give an example:
I have an ion-datetime with presentation="year" bound to a form value with formControlName="myDate". It is inside a popover and bound to an ion-datetime-button.
myDate initially is set to a Date in 2023, which through user interactions in other parts of the form gets updated to 2025. Now, when the user clicks on the ion-datetime-button to change the date, they see this:

2023 is highlighted, even though the current value is 2025, and even though the user never actually interacted with this input before. If the user now wants to change the value to 2023, they can't, because clicking the already selected year doesn't register as an update. Instead, they have to select a different year, then select 2023 again.

---

This is slightly different to the calendar view, where at least the correct date is highlighted, just the wrong month is shown.

But the underlying issue is the same, in that an ion-datetime hidden in a modal or popover should update to reflect the current value when it is opened.

[mmamongy]

I fixed it by adding *ngIf="datevalue" , and it will show up with the preset value

[cra1gs]

The only way I have managed to resolve this is by using the reset() method of the ion-datetime.

I placed an ion-button inside the ion-datetime tag with (click)="datepicker.reset( )"

<ion-datetime  
  #datepicker   
   presentation="date"
  [(ngModel)]="dateValue" 
  [showDefaultButtons]="true"
  ngDefaultControl 
>
       <ion-button color="danger" class="datepicker_reset" #datepicker_reset (click)="datepicker.reset( dateValue )">Reset</ion-button>
</ion-datetime>

I added css for the button to display:none

Then from the component.ts spoof a click event

constructor( private elem: ElementRef )

this.elem.nativeElement.querySelector('.datepicker_reset').click()

...and this works, it resets the element with the value stored in dateValue.

But this feels a bit hacky, to spoof a click from the contoller.

I tried to import IonDateTime from @ionic/angular, and use ViewChild
@ViewChild('datepicker') datepicker : IonDatetime;

then tried to call
this.datepicker.reset()

But this did not work.

[7eXx]

Same strange behavior while using FormControl

[connectMyClub]

I'm experiencing the same issue. Ionic 7 and Angular 15. If we retrieve the users e.g. date of birth from the back end the correct date shows in the ion-date-button but when the button us 'clicked' ion-date shows the current date until the user interacts with the calendar / wheel. Then the date suddenly updates to the retrieved date. Very odd UX.

[averyjohnston]

Hi folks, here is a dev build if anyone is interested in testing the proposed fix for this issue:

7.2.3-dev.11692214763.1b85c7df

Note that you may need to download Stackblitz apps before installing, as Stackblitz sometimes has issues with not installing the correct version.

[averyjohnston]

This has been resolved via #27806 and the update will be available in a future minor release of Ionic. Thank you!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.