bug: datetime should preserve selected date when switching month/year

[kyoz]

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 include this feature request, without success.

Describe the Feature Request

The new ion-datetime is great designed but it lack some UX friendly for user.

Describe the Use Case

Normally when a date time picker like this popup, user will click on some day, after that they just realize the month and year just wrong and click the month-year button to change it.

But after changing date and month, they have to pick the day again, it's somehow not really friendly for user.

This is current behavior.

https://user-images.githubusercontent.com/29815830/177728083-10f414b7-da59-4430-8db2-adf2bb215769.mov

Describe Preferred Solution

Should remain the day user have picked, and suggest a properly day if it's not valid in month-year pair they have picked.

I've managed to add this by some listeners and logic code but it's more cool if is integrated in Ionic itself.

https://user-images.githubusercontent.com/29815830/177728993-26b21ba2-9087-4d3f-ac68-e3d625915cad.mov

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[liamdebeasi]

Thanks for the issue. This is a good behavior to provide by default as the native pickers do this. To align with iOS, we should make the following changes:

1. When the month or year changes, the selected day should be preserved if possible.
2. If the selected day does not exist (for example, going from July 31 to June would not work because there is no June 31), then the selected date should be the closest previous date. For the July --> June example, June 30 would be selected because it is the closest previous date.

---

The benefit of this approach is that it reduces the number of taps required to select a new date. If users have June 10 selected but want May 10, they need to do the following:

1. Tap to open the month/year wheel
2. Scroll to the correct month
3. Tap to close the month/year wheel
4. Select the "10" again

With the proposed approach steps 3 and 4 would no longer be needed in order to confirm a date. Users may still perform step 3, but it is no longer required to get the date selected.

---

As far as I can tell, there is no downside to making this change for use cases where users want to change the month and the day. Users would still need to perform the following:

1. Tap to open the month/year wheel
2. Scroll to the correct month
3. Tap to close the month/year wheel
4. Select the correct day

[liamdebeasi]

Hi there,

I have a dev build if you are interested in testing a proposed fix: 6.2.9-dev.11663869678.1f9bb4a0

With this dev build, the day will be adjusted if you move to a month that has a different number of days. For example, going from January 31, 2022 to February will update the value to be February 28, 2022 instead of trying to update to February 31, 2022.

[kyoz]

Hi @liamdebeasi , just tested. It's working properly now, this will be more friendly for users.

[liamdebeasi]

Glad to hear the issue is resolved. I merged https://github.com/ionic-team/ionic-framework/pull/25996, and a fix will be available in an upcoming release of Ionic Framework.

[ionitron-bot[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.