bug: ion-datetime not accepting initial values across months when using with multiple option

[kumararun05]

Prerequisites

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

Ionic Framework Version

v7.x

Current Behavior

ion-datetime component in Angular doesn't accept values across different months when using with multiple="true". It works very well when we specify any values from the same month but if we supply value property across different months then it renders the calendar of 2021. It works in case of React but breaking in Angular. User is able to select the values from the calendar from multiple months but when the saved value or initial value that contains date across months, then it breaks.

Expected Behavior

ion-datetime component should accept values across different months when using with multiple="true" with Angular.

Steps to Reproduce

This is for Angular example.

1. Open the example Stackblitz url of the ion-datetime.
2. In the example.component.ts define a property named as selectedDates and assign the values as selectedDates = ['2024-02-20', '2024-03-05'] . Ensure that one date is from February and the other is from March.
3. In the example.component.html file, pass the selectedDates property to the value attribute.
4. Note that the calendar is not displaying the selected dates correctly, and it renders the calendar from the year 2021.

Code Reproduction URL

https://stackblitz.com/edit/angular-qtxwpy?file=src%2Fapp%2Fexample.component.ts

Ionic Info

@angular/animations 17.0.1

@angular/common 17.0.1

@angular/compiler 17.0.1

@angular/core 17.0.1

@angular/forms 17.0.1

@angular/platform-browser 17.0.1

@angular/platform-browser-dynamic 17.1.1

@angular/router 17.0.1

@ionic/angular 7.7.3

@ionic/core 7.7.3

rxjs 7.8.1

tslib 2.6.2

zone.js 0.14.2

Additional Information

No response

[kumararun05]

@thetaPC I found that this issue is mainly due to 1 check that is present in the line https://github.com/ionic-team/ionic-framework/blob/5a5f330705f77a8971119fad448101a5504d8e5e/core/src/components/datetime/datetime.tsx#L1306 . If we remove this then this will default select the month for the first value selected in the multiple selected value.

There can be 2 possible solutions to this:

1. Remove this check and auto select the month from the current date. As of now it is showing the default calendar from the 2021 year which is not relevant to user.
2. Take the input from the user which date calendar he/she want to open after loading so that UX can be customised by the dev itself based on their requirements.

[thetaPC]

Thank you for the issue!

This is happening to all packages. After reviewing, this is the expected outcome when there are multiple values with different months. The reason behind this is that we chose not to guess which date the developer wants to show, so the default date shown is May 2021. After talking with the team, we've decided to change it so that it shows just one of the values instead. When those changes are made, this issue will be updated to inform you of its release.

[sergiomilici]

I agree about that's not possible to auto jump a specific day if there are dates in different months and possible years too. But as devs, we need to have some way to determine this, it could be an initial prop indicating the initial month-year or at least expose the method to navigate to a specific month-year. That could be a real quick solution. I looked into the code and I found animateToDate but, for some reason I couldn't find because of lack of time, it doesn't work on ngOnInit or ngAfterViewInit. I had to add setTimeout(()=>this.navigate(2,11,2024),1000) inside ngAfterViewInit to make it work, but it first shows May 2021 and then navigates, which gives a bad user experience and I don't want to use an insecure 1-second delay.

Is there any other workaround to navigate to a specific month and year programatically or using a prop?

  @ViewChild('datetime')
  datetime: IonDatetime;

navigate(day, month, year) {
      //@ts-ignore
      this.datetime.el.animateToDate({day, month, year})
  }