Use Ionic 5 date picker in Ionic 6

Issue

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!

Solution

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 :-)

Answered By - Josemar Silva