You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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.
In the example.component.html file, pass the selectedDates property to the value attribute.
Note that the calendar is not displaying the selected dates correctly, and it renders the calendar from the year 2021.
. 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:
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.
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.
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
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
Prerequisites
Ionic Framework Version
v7.x
Current Behavior
ion-datetime
component in Angular doesn't accept values across different months when using withmultiple="true"
. It works very well when we specify any values from the same month but if we supplyvalue
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 withmultiple="true"
with Angular.Steps to Reproduce
This is for Angular example.
example.component.ts
define a property named asselectedDates
and assign the values asselectedDates = ['2024-02-20', '2024-03-05']
. Ensure that one date is fromFebruary
and the other is fromMarch
.example.component.html
file, pass theselectedDates
property to thevalue
attribute.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
The text was updated successfully, but these errors were encountered: