bug: Setting ion-datetime value does not update selected day

[aktivdigital-frontend]

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

When setting the value of an ion-datetime in a setTimeout, the display date updates, but after opening the datetime, the selected day does not display.

Expected Behavior

After setting the value of a ion-datetime, the selected day should also update.

Steps to Reproduce

1. Have an ion-datetime (example uses ion-datetime-button)
2. Update the value after a few seconds
3. Open the date picker
4. Observe: The new value does not show as the selected day
5. Expected: The new value would display as the highlighted/selected day

Code Reproduction URL

https://stackblitz.com/edit/angular-ramjpp?file=src%2Fapp%2Fexample.component.html,src%2Fapp%2Fexample.component.ts

Ionic Info

N/A

[sean-perkins]

@aktivdigital-frontend thanks for reporting this issue. I am seeing the same behavior as well.

The datetime has internal logic that requires the date be active & that we should highlight the day:

ionic-framework/core/src/components/datetime/datetime.tsx

Line 1927 in 436a8ce

'calendar-day-active': isActive && highlightActiveParts,

highlightActiveParts is unfortunately never set when the value is dynamically changed, so the day will never show as selected unless the user manually taps the day again.

[liamdebeasi]

@aktivdigital-frontend Can you try the following dev build and let me know if it resolves the issue?

npm install @ionic/[email protected]

Note: You may need to install this in a local Ionic app. StackBlitz sometimes has issues installing dev builds of Ionic.

[liamdebeasi]

Thanks for the issue. This has been resolved via #26070, and a fix will be available in an upcoming release of Ionic Framework. Feel free to continue testing the dev build and let me know if you run into any issues.

[charlesj1]

Should this problem be fixed now? When I update the above StackBlitz to 6.3.2, I get the same issue...
https://stackblitz.com/edit/angular-ramjpp-squwwg?file=src%2Fapp%2Fapp.component.ts,package.json

[aktivdigital-frontend]

@liamdebeasi Highlight is OK, thanks, but the picker show the current month, not the set month. This issue is only partially finished.

[jonathan-chin]

I'm experiencing the same issue. initially on 6.1.9 and again trying 6.3.6

[sean-perkins]

Please open a new issue with a reproduction if you are experiencing an issue on a closed issue.

The original reported issue with highlighting the active day when the value changes is working as expected in 6.3.6: https://stackblitz.com/edit/angular-qfjs5s

The issue discussed by @aktivdigital-frontend appears to be a different problem, where preferWheel does not set the position to the active value: https://stackblitz.com/edit/angular-qfjs5s-bm5rpn

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