ionic-frameworkionic5ionic6

Use Ionic 5 date picker in Ionic 6


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!

enter image description here


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