bug: datetime wheel picker does not auto select first item

[RRGT19]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x
• [ ] Nightly

Current Behavior

When using the ion-datetime with preferWheel, I cannot choose the first date presented.

The demo above shows today date by default, if the date that the user wants to select is today, he cannot do it.

The same happens if I use a max date:

Expected Behavior

The user should be able to select the first date that is presented.

Steps to Reproduce

Implement an ion-datetime with preferWheel as is and try to select the first date available shown on the wheel.

Code Reproduction URL

https://github.com/RRGT19/ionic-test-datetime-with-no-initial-value

Ionic Info

Ionic:

   Ionic CLI                     : 6.20.1
   Ionic Framework               : @ionic/angular 6.2.5-dev.11661540078.1d2af6ea
   @angular-devkit/build-angular : 14.2.0
   @angular-devkit/schematics    : 14.2.0
   @angular/cli                  : 14.2.0
   @ionic/angular-toolkit        : 6.1.0

Capacitor:

   Capacitor CLI      : 4.1.0
   @capacitor/android : not installed
   @capacitor/core    : 4.1.0
   @capacitor/ios     : not installed

Utility:

   cordova-res : 0.15.4
   native-run  : 1.6.0

System:

   NodeJS : v16.16.0
   npm    : 8.18.0
   OS     : macOS Monterey

Additional Information

The demo repo uses the dev build 6.2.5-dev.11661540078.1d2af6ea that was provided here.

[RRGT19]

@liamdebeasi Hi Liam, thanks for all the support so far.

Did you have time to take a look at this issue? any workaround until a complete fix is release?

[shaifulborhan]

Any updates about this issue?

Still happening in Ionic 6.3.4.

[baartho]

Any updates on this issue?

Stil happening on Ionic 6.4.1.

Thanks

[fluxc]

I had the same issue looks like the date I was passing into the value was undefined. It used to work in the past but not anymore after I updated all the packages. Make sure you have a date there. new Date().toISOString();

[Bishal-Vishwakarma]

@RRGT19 @baartho @shaifulborhan

The below work around worked for me:

Until this bug gets resolved we can do the following as a workaround to make this behaviour work:

ion-datetime triggers ionChange event only when there's a change in the value of ion-datetime.

1. So, assign an empty string ("") as the default value to the variable or the formcontrol which you have used to bind with [value] of ion-datetime.
2. set [value] of ion-datetime with the variable or the formcontrol.value
3. Now when you click on done without interacting with the wheel type picker, you will receive the ionChange event. Bind a method to the event and check for the event.detail.value, it will come as 'undefined'. set the desired datetime (in this case, the current date) if the event.detail.value comes as undefined.

With the above steps, the default value population without interaction will work correctly without a lot of code change.

[sean-perkins]

Hello everyone 👋

Here is a dev-build for the proposed fix to this issue: 7.5.5-dev.11699910223.156d984c. If you would like to test and provide any feedback, that would be appreciated!

[sean-perkins]

Hello everyone 👋

My previous dev-build has been updated: 7.5.7-dev.11700601905.13f94170. This includes a fix for clamping the default date parts used internally against the min/max values.

[ionitron-bot[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.