bug: `ion-datetime` with presentation `time` does not emit ionChange when initial value is not set

[langy]

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

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

Changing or attempting to set the time in an ion-datetime component doesn't fire a change event so it is unusable.

Expected Behavior

After changing or setting a time using the ion-datetime component, it should fire a change event (like it used to do).

Steps to Reproduce

• Add an ion-datetime component with the presentation="date-time" or presentation="time" attribute
• Choose the 'Time' button
• Select a time
• Note that the time does not update or get set (no change event)

Code Reproduction URL

https://stackblitz.com/edit/angular-1ez814

Ionic Info

Ionic:

Ionic CLI : 6.18.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 6.1.7

Capacitor:

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

Utility:

cordova-res : 0.15.4
native-run (update available: 1.6.0) : 1.5.0

System:

NodeJS : v16.13.0 (/usr/local/bin/node)
npm : 8.1.0
OS : macOS Big Sur

Additional Information

Reported by another user in the Ionic Discord server on 28th May 2022, https://discordapp.com/channels/520266681499779082/938816942750449704/979783252413935616

I found the above message when searching Discord for 'datetime' to see if anyone else was having these issues. I hadn't changed any of my own code that uses this component and already hooked into the change event, so was wondering why it no longer worked. I think it became broken with a recent core update.

[andreaslarssen]

Like this #25365?

[langy]

Like this #25365?

Yes like that, except you reference the presentation="year" in your example, so perhaps it's only for the scrolling parts of this component? I noticed that if it's a full calendar, changing the date using the buttons for the days does actually set the date correctly. Strange how it works perfectly for some versions of the component but not others!

[andreaslarssen]

You sure it's not just when the initial value is null/undefined?

[langy]

You sure it's not just when the initial value is null/undefined?

You're right. If I set it to '00:00' first up, it works. Not ideal as I never used to do this, but it's a temporary solution. Thanks for the heads up!

[MaximSedov]

You sure it's not just when the initial value is null/undefined?

You're right. If I set it to '00:00' first up, it works. Not ideal as I never used to do this, but it's a temporary solution. Thanks for the heads up!

Please, tell me, how did you set the time to '00:00'?

[langy]

You sure it's not just when the initial value is null/undefined?

You're right. If I set it to '00:00' first up, it works. Not ideal as I never used to do this, but it's a temporary solution. Thanks for the heads up!

Please, tell me, how did you set the time to '00:00'?

If you're using Ionic React and Moment.js (I know, it's old but it works for me), then this will mimic the default behaviour before this bug crept in:

<IonDatetime
  presentation="time"
  showDefaultButtons={true}
  value={moment().format('HH:mm')} />

Otherwise if you all you want to do is set it to 00:00, then just use value="00:00" instead.

[MaximSedov]

You sure it's not just when the initial value is null/undefined?

You're right. If I set it to '00:00' first up, it works. Not ideal as I never used to do this, but it's a temporary solution. Thanks for the heads up!

Please, tell me, how did you set the time to '00:00'?

If you're using Ionic React and Moment.js (I know, it's old but it works for me), then this will mimic the default behaviour before this bug crept in:

<IonDatetime
  presentation="time"
  showDefaultButtons={true}
  value={moment().format('HH:mm')} />

Otherwise if you all you want to do is set it to 00:00, then just use value="00:00" instead.

Thank you very much for the answer, I understand the essence. I asked this question both because value="00:00" doesn't work for me.

[pauloanalista]

Bug only occurs if you do not inform the
showDefaultButtons={true}

[andreaslarssen]

@pauloanalista No? At least not in the Angular package

[langy]

Bug only occurs if you do not inform the showDefaultButtons={true}

Sorry but this doesn't affect the outcome for me. showDefaultButtons was always true and the bug still occurred.

[pauloanalista]

If you do not inform this property, it will not allow you to select the time correctly

showDefaultButtons={true}

that was my problem