Use Ionic 5 date picker in Ionic 6

Question

Hi i am using ionic 5 for my project and recently migrated to ionic 6 everything looks great but one thing concerns me is the datetime picker i want that in old style this way please help!

Answer 1

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

html:

  <div class="hacking-datetime">
    <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 :-)

Answer 2

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

Answer 3

You can use this way

<ion-datetime showDefaultButtons="true" presentation="date" #popoverDatetime1 (ionChange)="setPreferredDate(popoverDatetime1.value)" > </ion-datetime>

 setPreferredDate(value) {
    const convertDate = format(parseISO(value), 'dd MMM , yyyy');
    this.schedulePreferredDate = convertDate;
  }

https://ionicframework.com/blog/the-new-datetime-component-in-ionic/

Answer 4

<ion-datetime presentation="date" [preferWheel]="true"></ion-datetime>

This works for me, shows a date spinner with month / day / year wheels