bug: (ios) ion-datetime not selecting time with ion-datetime-button

[sergiomilici]

Prerequisites

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

Ionic Framework Version

v8.x

Current Behavior

On iOS (16.7.10) using Capacitor 6.1, the component ion-datetime is emitting ionChange with the value of event.detail.value in undefined. It only works if, after stopping the wheels in the desire time, you touch that number (and the keyboard shows up). Otherwise, visually you see the time selected, but the emitted event doesn't have the correct time.

It works okay on Mac Chrome, Safari, and Android.

This is really strange. The same thing happens using ionic official documentation when playing with the widgets in Safari mobile.

Example code:

<ion-datetime-button datetime="datetime"></ion-datetime-button>

<ion-modal [keepContentsMounted]="true">
  <ng-template>
    <ion-datetime id="datetime"        
                            [showDefaultButtons]="true"
                           (ionChange)="ionDateChanged($event)">
</ion-datetime>
  </ng-template>
</ion-modal>

 ionDateChanged(event) {
    console.log('ionDateChanged: ', event);
  }

RPReplay_Final1728423253.mp4

Expected Behavior

After the wheel of hour or minute stops, the event ionChange emits a value that has the correct time.

Steps to Reproduce

This could be tested using the stackblitz from ionic official documentation. This is the code to run in Safari or capacitor

Code Reproduction URL

https://stackblitz.com/run?file=src%2Fapp%2Fapp.component.ts

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/Users/chicho/.nvm/versions/node/v22.6.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 8.3.2
@angular-devkit/build-angular : 18.2.4
@angular-devkit/schematics : 18.2.4
@angular/cli : 18.2.4
@ionic/angular-toolkit : 12.1.1

Capacitor:

Capacitor CLI : 6.1.2
@capacitor/android : 6.1.2
@capacitor/core : 6.1.2
@capacitor/ios : 6.1.2

Cordova:

Cordova CLI : not installed
Cordova Platforms : not available
Cordova Plugins : not available

Utility:

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

System:

NodeJS : v22.6.0 (/Users/chicho/.nvm/versions/node/v22.6.0/bin/node)
npm : 10.8.2
OS : macOS Unknown
Xcode : Xcode 15.4 Build version 15F31d

Additional Information

No response

[seatechdev]

The issue I am having is that if I select the date but do not select the time, it doesn't default to the current time. Ideally it should because you can already see the time. For example, lets say it is 8:30am for real. When you go to the date time component using you will see 8:30am. Now lets say that user selects the date and then 10am but leaves 30min as it is for 10:30am. Ionic doesn't default to to 10:30am. Instead it gives an error that field is not selected.

[jtumain]

I'm able to reproduce this issue.

The weird thing for me is that the issue occurs on device, but it doesn't happen when running on a simulator.

[salisshuaibu11]

@seatechdev it is the same thing i am dealing with currently, my own case is date. it does not default to the current date, have you been able to fix it?

[jtumain]

Unfortunately not. I have been hoping for a patch. If not I will have to use something custom such as the native HTML time controls.

[huangzf128]

There is a piece of code in the file p-ba35f07f.entry.js (can be found by searching for: export{b as ion_picker_column}) .
const b = m.elementsFromPoint(d, p).find((i => "ION-PICKER-COLUMN-OPTION" === i.tagName));
to find the selected month/year/day when the scroll wheel stops scrolling.

The elementsFromPoint() will returns an array of all elements at the specified coordinates(d, p), but in ios16 it does not include the ion-picker-column-option tag, which is the exact element that needs to be found.
However, using elementFromPoint() would allow you to find this element.

so, i change the code like this:

let b = m.elementsFromPoint(d, p).find((i => "ION-PICKER-COLUMN-OPTION" === i.tagName));
if (!b) {
  b = m.elementFromPoint(d, p);
}

This worked for me, and I hope it helps.
ionic version: 8.0.0

[nikqig]

I'm also having the same issue. It is working as intended on Android, but when it comes to iOS the ionChange doesn't fire.

[SamTheWizard]

Same issue here..

[salisshuaibu11]

Here's how I managed to fix it: Initially, when the time picker opens, event.detail.value is undefined, meaning it doesn’t default to the current date. To resolve this, I added a check to see if it’s undefined and set it to the current date manually. Otherwise, it uses the selected date. Once a date is selected, it will no longer be undefined.

onDatetimeChange(event: any) {
    const CURRENT_DATE = event.detail.value ?? new Date().toISOString();
    if (event.detail.value === undefined) {
      // Todo
    } else {
     // Todo
    }
  }

[sergiomilici]

Investigating this a little more, what I found while testing on my phone with iOS 16.7.11, is that the wheel is not updating internally the current element by adding/removing the option-active class.

<ion-picker-column-option part="wheel-item active" class="ion-color ion-color-primary md option-active" color="primary">16</ion-picker-column-option>

While scrolling the picker column, the <ion-picker-column-option doesn't change`. If I tap into a specific number, then this is updated and emits the correct value.

[AlexEnrique]

Facing the same issue, with Capacitor v7 and Ionic React 8.5.2.

I decide to check if the user is on iOS and use the native input as a fallback until this gets fixed.

[thetaPC]

Thank you for submitting this issue! I'm not able to access the repro.

I believe that the issue is related to #29672. It would be great if someone can verify if the following dev build fixes it: npm install @ionic/angular@8.6.2-dev.11749761258.1b46b6a9