Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
3 tasks done
kumararun05 opened this issue Feb 27, 2024 · 4 comments · Fixed by #29610
Closed
3 tasks done

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

kumararun05 opened this issue Feb 27, 2024 · 4 comments · Fixed by #29610
Labels
package: core @ionic/core package type: bug a confirmed bug report

Comments

@kumararun05
Copy link

Prerequisites

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
@ionitron-bot ionitron-bot bot added the triage label Feb 27, 2024
@kumararun05
Copy link
Author

@thetaPC I found that this issue is mainly due to 1 check that is present in the line

ionic-framework/core/src/components/datetime/datetime.tsx

Line 1306 in 5a5f330

if (areAllSelectedDatesInSameMonth) {
. 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
Copy link
Contributor

thetaPC commented Mar 6, 2024

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.

@thetaPC thetaPC changed the title bug: ion-datetime (Angular) not accepting initial values across months when using with multiple option bug: ion-datetime not accepting initial values across months when using with multiple option Mar 6, 2024
@thetaPC thetaPC added package: core @ionic/core package type: bug a confirmed bug report and removed triage labels Mar 6, 2024
@thetaPC thetaPC removed their assignment Mar 6, 2024
@sergiomilici
Copy link

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

@sean-perkins sean-perkins mentioned this issue Jun 12, 2024
Merged
2 tasks
@thetaPC thetaPC mentioned this issue Jun 12, 2024
Closed
3 tasks
@IraSoro IraSoro mentioned this issue Jan 9, 2025
Merged
@thetaPC thetaPC marked this as a duplicate of #29604 May 27, 2025
github-merge-queue bot pushed a commit that referenced this issue May 30, 2025
@sean-perkins @thetaPC
fix(datetime): set working parts to last selected value (#29610)
14f32f8 
Issue number: resolves #29094

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

When assigning multiple selected dates that span different months, the
date time will not set the correct working parts and instead fallback to
the default date: May 28, 2021.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

When opening the datetime with multiple dates selected, the calendar
will animate to the last value in the array of selected dates.

If the datetime is collapsed, body is not visible, is not a grid view or
the user has made a selection of a new date, the calendar will not
animate and instead will set the working parts to the current value
selected (latest/last value).

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Internally we discussed setting the month view to the first value in the
array. Upon further investigation I determined this is not the expected
behavior. When a user interacts with multiple date selection, the most
recent selection (their active view) is the **last** value in the array.
Animating or updating the working parts to the first value in the array
would result in the calendar month jumping after every selection. Using
the last index of the array results in no odd jumps in the experience.
If a developer wishes to configure this behavior, they can change the
order of the values in the value assigned to the datetime (to cause a
specific month/date to be the initial view).

Dev build: `8.5.8-dev.11748388365.11ad9dfe`

---------

Co-authored-by: Maria Hutt <[email protected]>
@thetaPC
Copy link
Contributor

thetaPC commented May 30, 2025

Thanks for the issue! This has been resolved via PR #29610 and will be available in an upcoming release of Ionic.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
package: core @ionic/core package type: bug a confirmed bug report
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(datetime): set working parts to last selected value ionic-team/ionic-framework
3 participants
@sergiomilici @thetaPC @kumararun05