mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-08 15:51:16 +08:00
fix(datetime): scroll to newly selected date when value changes (#27806)
Issue number: Resolves #26391 --------- <!-- 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 updating the `value` programmatically on an `ion-datetime` after it has already been created: - With grid style: The selected date visually updates, but the calendar does not scroll to the newly selected month. - With wheel style: The selected date does not visually update, i.e. the wheels do not move to show the newly selected date. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Grid style datetimes now scroll to the selected date using the same animation as when clicking the next/prev month buttons. - This animation mirrors the behavior in both MUI and native iOS. See the [design doc](https://github.com/ionic-team/ionic-framework-design-documents/blob/main/projects/ionic-framework/components/datetime/0003-datetime-async-value.md) for more information and screen recordings. - The animation will not occur if the month/year did not change, or when the datetime is hidden. - Wheel style datetimes now visually update to the selected date. No animation occurs, also mirroring native. - The `parseDate` util has also had its type signatures updated to account for returning `undefined` when the date string is improperly formatted. This was missed when the util was refactored to support multiple date selection. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> - Docs PR: https://github.com/ionic-team/ionic-docs/pull/3053 - While this can technically be considered a bug fix, we are merging it into a feature branch for safety; it's a fairly significant change to how datetime behaves, and may interfere with custom logic when updating a datetime's value async. - Jumping to the newly selected value is handled by replacing everything [here](https://github.com/ionic-team/ionic-framework/pull/27806/files#diff-4a407530c60e3cf72bcc11acdd21c4803a94bf47ea81b99e757db1c93d2735b8L364-L407) with `processValue()`. This covers both wheel and grid datetimes. - `activePartsClone` as a whole was also removed. It was added in https://github.com/ionic-team/ionic-framework/pull/24244 to enable changing `activeParts` without triggering a rerender (and thus jumping to the new value) but since we now want to do that jump, the clone is no longer needed. - The animation code might be tricky to follow, so I recorded going through it: https://github.com/ionic-team/ionic-framework/assets/90629384/1afa5762-f493-441a-b662-f0429f2d86a7
This commit is contained in:
@ -206,6 +206,10 @@ export class DatetimeButton implements ComponentInterface {
|
||||
*/
|
||||
const parsedDatetimes = parseDate(parsedValues.length > 0 ? parsedValues : [getToday()]);
|
||||
|
||||
if (!parsedDatetimes) {
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* If developers incorrectly use multiple="true"
|
||||
* with non "date" datetimes, then just select
|
||||
|
||||
Reference in New Issue
Block a user