Use Ionic 5 date picker in Ionic 6-CodePudding

The

CodePudding user response：

EDIT: From my understanding there is no way to use the old style UI. See more here: Use ion-datetime v4 instead of v6

I think your best bet is to use the new ion-date and try to implement your old style using CSS/modal properties. You might try something like this:

<ion-button id="open-modal">Open Datetime Modal</ion-button> <ion-modal [initialBreakpoint]="0.5" trigger="open-modal"> <ng-template> <ion-content> <ion-datetime></ion-datetime> </ion-content> </ng-template> </ion-modal>

Here you can find more examples of how to use the new date-picker: https://ionicframework.com/docs/api/datetime#usage

And here you can find more info about styling/ using the modal: https://ionicframework.com/docs/api/modal#inline-modal

CodePudding user response：

You can do it using some hacking. The ion-datetime accepts a property named yearValues where you can create 'custom' year values.

html:

<div > <ion-datetime presentation="year" [yearValues]="yearValues"></ion-datetime> <ion-datetime presentation="month-year"></ion-datetime> </div>

ts:

yearValues = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30];

css:

.hacking-datetime { display: grid; grid-template-columns: 1fr 2fr; position: absolute; bottom: 0; width: 100%; }

Demo Image Here

Although it will be visually the same as before(after some css of course) programatically you'll have to do a lot of work. And, as I said before it's a hack, so I really do not reccomend you using it :-)