bug: datetime shows previous month after closing time popover

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

I find this issue a bit difficult to describe, as I don’t know what some parts of the date-time element are called. But I will embed a video.

When selecting a time using the date-time element, the calendar will be shown in an incorrect state. Or at least, it seems like it tries to show May instead of the current (by the time of this issue) June.

Before selecting a time:

After selecting a time:

Expected Behavior

After selecting a time, I do not expect the day to get changed (when a day is selected). When no day is selected, I expect it to select a default date or today’s date after selecting a time, or at the very least not a “jumping” calendar.

It does seem to work when selecting a day from another month before selecting a time.

https://user-images.githubusercontent.com/43609220/172803346-3b27ddd6-5e54-4c02-9d81-b1b1beec44a6.mp4

Steps to Reproduce

1. Select a time
2. Dismiss the popover time scroll wheel by clicking the backdrop
3. The calendar will show incorrectly

https://user-images.githubusercontent.com/43609220/172804110-ea74e511-1913-4877-b107-7fe980f5093d.mp4

---

1. Select a day in the same month that is open
2. Select a time
3. Dismiss the popover time scroll wheel by clicking the backdrop
4. The calendar will be shown incorrectly

https://user-images.githubusercontent.com/43609220/172804167-dfab305a-cc7e-48d9-af5a-07f1f325abed.mp4

Code Reproduction URL

https://github.com/TimGels/ionic-date-time-repro

Ionic Info

[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package'

       Require stack:
       - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
       - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
       - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
       - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic
[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package'

       Require stack:
       - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
       - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
       - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
PS C:\Users\user\projects\ionic-date-time-repro\ionic-date-time-repro> ionic info
[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package'

       Require stack:
       - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
       - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
       - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
       - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic
[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package'

       Require stack:
       - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
       - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
       - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
       - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic

Ionic:

   Ionic CLI                     : 6.18.2 (C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 6.1.9
   @angular-devkit/build-angular : 14.0.1
   @angular-devkit/schematics    : 14.0.1
   @angular/cli                  : 14.0.1
   @ionic/angular-toolkit        : 6.1.0

Capacitor:

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

Utility:

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

System:

   NodeJS : v16.14.0 (C:\Program Files\nodejs\node.exe)
   npm    : 8.3.1
   OS     : Windows 10

Additional Information

N/A

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/25478, and a fix will be available in an upcoming release of Ionic Framework.

[TimGels]

What is the output of running ionic info from your project’s directory? I tested your GitHub repo in Firefox and Chrome with the dev build and things appear to be working now.

My apologies, it appears that I had installed the @ionic/angular package in the wrong directory. Now that I installed it in the correct project, it is indeed fixed!