feat: Migration path from v5 ion-datetime to v6

[dtarnawsky]

Feature Request

Ionic version:
[x] 6.x

The v5 ionic ion-datetime component combines both display of date/time in various formats with selection of date/time in various formats. The new v6 component is an inline selection of date/time as a calendar only.

In converting a v5 project to v6 a page of (typical) array of ion-item with ion-datetime will convert to inline calendars. This leaves you in a place where you have to recreate the v5 functionality and solve:

1. How to facilitate selection of more than a date (eg only month/year, year or month)
2. How to display the chosen date/time and trigger a popup/modal in a way similar to v5

The Wishlist:

• Easy migration from v5 style to v6
• Options to display the calendar/selector near the input (eg like you would want for larger displays: tablet/desktop)
• Options to select just a month/year, month, or year

[liamdebeasi]

Fleshing this out a bit more, there are 4 main tasks here:

1. There need to be a way to select just month/year, month, or year instead of a full date. This will require additional feature work for ion-datetime, but should be do-able. This issue will be used to track progress on this task.

2. There needs to be a way to display ion-datetime in a popover near the input that it is linked up to. This is already possible, but the documentation on how to wire this up is scarce so it's not very obvious.

3. As part of 2, there needs to be a way to control sizing inside of a popover or a modal otherwise it is going to be hard to use. Progress on this will be tracked in bug: v6, datetime should have better APIs for controlling size #23518.

4. Given that the new ion-datetime is a big change from the ion-datetime in v4 and v5 there needs to be a migration guide similar to what we have for ion-slides and ion-virtual-scroll. While the migration should not require a major refactor of application code, the migration will be confusing if developers do not have a step by step guide to refer to as quite a bit has changed. Part of this could be providing developers with code on how to re-implement a datetime "cover" similar to what exists in Framework v5 to make the migration easier.

[bchehraz]

Can I also add that the ion-datetime should allow for Time input only, as in no calendar? Also, support for 24-hour time would be splendid. I just barely started using the beta so if these are already supported and I haven't figured it out yet, forgive me :)

[liamdebeasi]

You can select time only via the presentation property: https://beta.ionicframework.com/docs/api/datetime#customizing-date-and-time-presentation

ion-datetime will automatically use 24 hour time based on the device's locale, but we do not have a feature that lets you "force" 24 hour time.

[bchehraz]

I tried changing my Android 11 phone's 24-hour preference to true and it did not update the ion-datetime to 24-hr. An override would be ideal though since I have a user preference setting to let them pick 12-hr and 24-hr format.

[liamdebeasi]

You need to change the locale/region itself, not the 24 hour preference. Browsers do not currently have a way of separating the 24 hour preference from the locale. For example a locale of en-US would use 12 hour time, but a locale of en-GB would use 24 hour time. If you want a property that sets 24 hour format, I recommend creating a new feature request with a use case.

[bchehraz]

Ohh gotcha, thank you for clearing that up. I'll make sure to put in a feature request then!

[mirkonasato]

Perhaps the simplest way to migrate from v5 is to use an <ion-input type="date" /> instead of <ion-datetime>?

[liamdebeasi]

Hi everyone,

I wanted to provide an update regarding the work we have done here. As per #23542 (comment), there were 4 things that the Ionic 6 datetime migration needs:

1. There needs to be a way to select just month/year, month, or year.

This is now possible using the presentation property on ion-datetime. This properly also allows developers to select only time. See https://beta.ionicframework.com/docs/api/datetime#customizing-date-and-time-presentation for more information.

2. There needs to be a way to display a popover near the input it is linked up to.

This has always been possible with the new datetime, but we were missing examples. You can now find examples for how to do this on the Datetime Usage Documentation. The "Datetime in popover with input" example shows how to do this.

3. There needs to be a way to control the sizing of the modal or popover.

We added the size property to accomplish this. With size, developers can define how a datetime should scale to take up a container. See https://beta.ionicframework.com/docs/api/datetime#size for more information.

I don't think we have perfected the developer experience on this. Ideally developers could show a modal that is snapped to fit the size of the datetime. We are tracking this in #24316.

4. There needs to be a migration guide for moving to the new datetime.

Work on this has been completed via ionic-team/ionic-docs#2111. The documentation for this will be live soon. Additionally, we have created a sample application to show "before and after" usage of ion-datetime, so that developers can migrate to Ionic 6 and retain the same cover style found in Ionic 5. This should make the migration easier as it means you will not have to rethink the page layout where this datetime is. These examples can be found at https://github.com/ionic-team/datetime-migration-samples.

This datetime component is a big change, and I feel we have addressed many of the concerns listed here and in other threads. That being said, the new datetime component is not perfect, and there may be some speed bumps along the way. Please open new issues with any feedback you may have on this component. We are committed to creating a great date and time picker experience for Ionic.

I am going to close this as the tasks laid out in the initial post have been completed. Please look for the full migration guide soon. Thank you!

[DominikRoth]

Hi everyone,

I just started migrating my ion-datetime v5 to the new v6 version.
And i ran into a problem I can't resolve without a workaround.

My v5 ion-datetime is inside a template-driven angular form. It has a name-property to connect to a value of the form.
I want to replace it with a ion-datetime modal. The problem is, that when the modal is closed, the ion-datetime is missing in the form and i get errors.

I can implement a workaround, but I would prefer it this can work somehow.

Best regards,
Dominik

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