Use ion-datetime v4 instead of v6

Question

I am working on an ionic project that was primarily built using v4 of the ionic framework. After a recent change in my system setup I'm not able to display my datetime component as it was under ionic v4

I would like to display my date time as following:

Instead of what it is now:

How to force ionic to use v4 component instead of v6 ?

add this in your package.json `"@ionic-native/core": "^5.34.0",` and run: `npm i` — Najam Us Saqib, Dec 16 '21 at 15:57
Yes, no way to use the old UI for datetime. I would appreciate if they gave a way of selecting what we want as datetime UI. — Jean-Élisée Yao, Dec 24 '21 at 11:59

score 0 · Answer 1 · answered May 23 '22 at 00:41

After looking for a good idea and keeping the version of ionic, you can use the multipicker as a date picker, I know it's not the best solution, but is the closer way to do it with the same view, here is an example of day - month picker

Put in your html:

<ion-item>
<ion-input type="">{{pdate}}</ion-input>
</ion-item>
<ion-button expand="block" (click)="presentPicker()">Show Picker</ion-button>

Put in your controller:

private pdate: string;
constructor(private pickerController: PickerController) { }
...
async presentPicker() {
const picker = await this.pickerController.create({
  buttons: [
    {
      text: 'Confirm',
      handler: (selected) => {
        this.pdate = selected.day.value +selected.month.value ;
      },
    }
  ],
  columns: [
    {
      name: 'day',
      options: [
        { text: '01', value: '01' },
        { text: '02', value: '02' },
        { text: '03', value: '03' },
      ]
    },
    {
      name: 'month',
      options: [
        { text: 'Jan', value: '01' },
        { text: 'Feb', value: '02' },
        { text: 'Mar', value: '03' },
      ]
    }
  ]
});
await picker.present();

}

Jain Bhavesh · Answer 2 · 2021-12-17T06:53:44.743

-3

you need to install ionic v4 follow this command

npm install -g ionic@5.0.0

edited Dec 17 '21 at 06:53

answered Dec 16 '21 at 13:51

Jain Bhavesh

558
5
17

When installing I get the following error. No matching version found for @ionic/cli@5.9.3 I installed the @ionic/angular@5.9.3 but the same issue persists. – Jean-Élisée Yao Dec 16 '21 at 14:11
try this npm install -g ionic@5.0.0 – Jain Bhavesh Dec 17 '21 at 06:53
This answer doesn't make any sense, you're suggesting a full framework upgrade, not a solution to this specific problem WHILE keeping Ionic v6 – DARKGuy Feb 05 '22 at 00:14

Use ion-datetime v4 instead of v6

2 Answers2

Linked