ion-datetime not displaying like a full calendar

Issue

I'm new with ionic development and I'm having issues with the ion-datetime component. According to the documentation, the component should be showing like this. But when I put it in the app it shows like this.

I've been messing around with the properties but it still shows the datetime like a bottom picker instead of a full calendar. The page where I need the datetime is shown as a modal, but I get the same result if put it in a normal page.

Here what my ionic info shows

Ionic:

   Ionic CLI                     : 6.18.1 
   Ionic Framework               : @ionic/angular 5.9.1
   @angular-devkit/build-angular : 12.1.4
   @angular-devkit/schematics    : 12.1.4
   @angular/cli                  : 12.1.4
   @ionic/angular-toolkit        : 4.0.0

Capacitor:

   Capacitor CLI      : 3.3.2
   @capacitor/android : 3.3.3
   @capacitor/core    : 3.3.2
   @capacitor/ios     : 3.3.3

Utility:

   cordova-res : not installed globally
   native-run  : 1.5.0

System:

   NodeJS : v14.16.0 
   npm    : 6.14.11
   OS     : Windows 10

Solution

It as @Najam said, I upgraded the ionic to 6 and its working as intended. We where early into development so there wasnt a lot of problems

Answered By - samiretas