bug: ion-datetime not changing class 'calendar-day-active' when clicking a date

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

Current Behavior

It happens when I use the ion-datetime in a modal and when showDefaultButtons=true.

In browser and on android phone:

When I select a date, the class ‘calendar-day-active’ doesn’t change to the selected date. The only thing that happens when I select a date is that the :focus styling applies. (I selected 17. in this example) EDIT: The behavior for browser and android seems to be normal, it just feels odd to me. Because when I click a date, I expect it to change the active styling and when i press ‘Done’ i want the value to be written to my variable.

On iOS:

The selected date doesn’t change styling at all. Not even the focused styling gets applied. After i clicked 15. the value is set to my variable, but it is not visible.

Expected Behavior

When I click on a date, I expect it to have the active styling.

Steps to Reproduce

1. Put the code snippet into an Ionic v6 app and build for iOS
2. Run the app on simulator or on physical iOS device
3. Open ion-datetime in modal-mode
4. click on another date than the currently selected one
5. Check if active styling is applied to the selected date

Code Snippet

<ion-button id="open-modal">Open Datetime Modal</ion-button>
<ion-modal trigger="open-modal">
  <ng-template>
    <ion-content>
      <ion-datetime showDefaultButtons="true"></ion-datetime>
    </ion-content>
  </ng-template>
</ion-modal>

Ionic Info

Ionic:

Ionic CLI : 6.16.3 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 6.0.0 @angular-devkit/build-angular : 12.1.4 @angular-devkit/schematics : 12.1.4 @angular/cli : 12.1.4 @ionic/angular-toolkit : 4.0.0

Capacitor:

Capacitor CLI : 3.1.2 @capacitor/android : 3.2.4 @capacitor/core : 3.2.4 @capacitor/ios : 3.2.4

Utility:

cordova-res : not installed globally native-run (update available: 1.5.0) : 1.4.0

System:

NodeJS : v14.15.3 (/usr/local/bin/node) npm : 6.14.9 OS : macOS Catalina

Additional Information

No response

[brinehart]

I can reproduce this issue as well on Edge and Chrome on an intel 2020 Macbook.

It only happens for me when the [showDefaultButtons]="true" attribute is added. I should also mention that I am using ion-datetime inside of of an ion-modal

I am seeing this behavior when using 6.0.1 and also on 6.0.0-dev.1639426191.6f5c168

[sean-perkins]

Hello everyone! Thanks for reporting this issue, adding additional details and helping isolate the driving factors contributing to the bug.

I have an open PR to address this issue (and other mentioned issue): #24454

Unfortunately I am the one that introduced this bug when fixing another issue (programmatically setting the value wasn’t updating the date picker display) 🪦.

I want to write a few more tests later today to validate the previous (expected) behaviors as well as the patched fixes. If all that goes well, I’ll post a dev build for everyone to test with. With the holiday cycle, we won’t be publishing 6.0.2/6.1.0 until after the New Year.