ion-datetime ignores mode attribute

[gultyayev]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.x

Current behavior:

ion-datetime ignores "mode" attribute and "mode" property in "[pickerOptions]". Instead it follows either platform it's started on, or mode set in "forRoot".

Expected behavior:
Date time picker should respect "mode" value set either as an attribute or as a property in the "pickerOptions".

Steps to reproduce:

Scaffold a basic application and add to a template "ion-datetime" component. Set "mode" attribute to "md". Launch the app in browser using iOS simulator. Reload the page to make sure it uses iOS mode. Open the picker and observe iOS picker instead of md.

Related code:

Didn't find Stackblitz template for the v5 ionic so I didn't reproduce the bug as it doesn't require anything special in the setup to reproduce it.

Other information:

I thought that probably it would work correctly if I used a second IonicModule.forRoot with mode: "md" in the module where the picker is used, however it had no effect. Looks like it uses some global service/overlay which disrespects the mode in picker.

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.16
   Ionic Framework               : @ionic/angular 5.6.7
   @angular-devkit/build-angular : 0.1000.8
   @angular-devkit/schematics    : 10.0.8
   @angular/cli                  : 10.0.8
   @ionic/angular-toolkit        : 2.3.3

Capacitor:

   Capacitor CLI   : 2.4.7
   @capacitor/core : 2.4.6

Utility:

   cordova-res : not installed
   native-run  : 1.3.0

System:

   NodeJS : v14.16.1 (/usr/local/bin/node)
   npm    : 6.14.12
   OS     : macOS Catalina

[gultyayev]

Source code navigations using git have shown that most probably this is because the function is called with this. Meanwhile, here no arguments are expected which seems to me like the reason for this bug

[liamdebeasi]

Thanks for the issue. Can you reproduce this in an Ionic starter app and provide a link to the repo? I am setting <ion-datetime mode="ios"></ion-datetime> in an Ionic Angular starter app while running the app in MD mode, and the datepicker is showing up using the iOS styles as expected.

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[liamdebeasi]

Oh wait I had it backwards. I can see the issue if you start the app in iOS mode but force MD on the datetime component. I will add this to our datetime tracker here: #16630. We are also doing a complete revamp of the datetime picker for Framework v6, and I can confirm that this issue is fixed in that version.

I am going to close this in favor of the main datetime issue tracker (#16630). Thanks!

[gultyayev]

@liamdebeasi is there any chance this would land in v5 too?

[liamdebeasi]

We are redesigning the date picker with v6, so we likely will not backport it to v5. That being said, v6 should be an easy upgrade with minimal breaking changes.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.