Prerequisites
Ionic Framework Version
v8.x
Current Behavior
IonDatetime that has an isDateEnabled check that uses react state disables all dates when you close and reopen the calendar. This seems to have started with Ionic version 8.8.6. The temp workaround is to roll back to Ionic 8.8.5 or earlier.
For some reason this happens when you're using a react state variable in the isDateEnabled check. If you are just doing something on the fly like checking if the date is odd or even instead of comparing it against a state var, it seems to work ok.
See example: https://github.com/AnastasiaAtTerrestrialOrigin/IonicCalendarBugReproduction
Expected Behavior
No matter how many times you open the IonDatetime calendar, it should show the dates as enabled if isDateEnabled check passes.
Steps to Reproduce
If you are not using the example in the repo:
Make sure the Ionic library is set to 8.8.6 - 8.8.7.
Delete node_modules and do npm install again to make sure you have the right library.
Set the dates in the state to something in the current month (Depending on when you're looking at this ticket).
Click on the date to bring up the calendar. This will show the calendar with the given dates disabled, but the rest enabled.
Select a date or just click off the calendar to close it. Click the date button again to re-open the calendar. All the dates will be disabled. This seems to be an issue with ionic 8.8.6+. Workaround is to roll back to 8.8.5 until the fix is in place.
Code Reproduction URL
https://github.com/AnastasiaAtTerrestrialOrigin/IonicCalendarBugReproduction
Ionic Info
ionic info
[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package.json'
Require stack:
- /home/user/.npm-global/lib/node_modules/@ionic/cli/lib/project/index.js
- /home/user/.npm-global/lib/node_modules/@ionic/cli/lib/index.js
- /home/user/.npm-global/lib/node_modules/@ionic/cli/index.js
- /home/user/.npm-global/lib/node_modules/@ionic/cli/bin/ionic
[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package.json'
Require stack:
- /home/user/.npm-global/lib/node_modules/@ionic/cli/lib/project/index.js
- /home/user/.npm-global/lib/node_modules/@ionic/cli/lib/index.js
- /home/user/.npm-global/lib/node_modules/@ionic/cli/index.js
- /home/user/.npm-global/lib/node_modules/@ionic/cli/bin/ionic
Ionic:
Ionic CLI : 7.2.1 (/home/user/.npm-global/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 8.8.7
Capacitor:
Capacitor CLI : 8.3.4
@capacitor/android : not installed
@capacitor/core : 8.3.4
@capacitor/ios : not installed
Utility:
cordova-res : not installed globally
native-run : 2.0.3
System:
NodeJS : v22.22.0 (/usr/bin/node-22)
npm : 11.11.1
OS : Linux 6.18
Additional Information
This seems to happen only when using a react state variable to do the date check.
Prerequisites
Ionic Framework Version
v8.x
Current Behavior
IonDatetime that has an isDateEnabled check that uses react state disables all dates when you close and reopen the calendar. This seems to have started with Ionic version 8.8.6. The temp workaround is to roll back to Ionic 8.8.5 or earlier.
For some reason this happens when you're using a react state variable in the isDateEnabled check. If you are just doing something on the fly like checking if the date is odd or even instead of comparing it against a state var, it seems to work ok.
See example: https://github.com/AnastasiaAtTerrestrialOrigin/IonicCalendarBugReproduction
Expected Behavior
No matter how many times you open the IonDatetime calendar, it should show the dates as enabled if isDateEnabled check passes.
Steps to Reproduce
If you are not using the example in the repo:
Make sure the Ionic library is set to 8.8.6 - 8.8.7.
Delete node_modules and do
npm installagain to make sure you have the right library.Repo example: https://github.com/AnastasiaAtTerrestrialOrigin/IonicCalendarBugReproduction
Set the dates in the state to something in the current month (Depending on when you're looking at this ticket).
Click on the date to bring up the calendar. This will show the calendar with the given dates disabled, but the rest enabled.
Select a date or just click off the calendar to close it. Click the date button again to re-open the calendar. All the dates will be disabled. This seems to be an issue with ionic 8.8.6+. Workaround is to roll back to 8.8.5 until the fix is in place.
Code Reproduction URL
https://github.com/AnastasiaAtTerrestrialOrigin/IonicCalendarBugReproduction
Ionic Info
ionic info
[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package.json'
[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package.json'
Ionic:
Ionic CLI : 7.2.1 (/home/user/.npm-global/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 8.8.7
Capacitor:
Capacitor CLI : 8.3.4
@capacitor/android : not installed
@capacitor/core : 8.3.4
@capacitor/ios : not installed
Utility:
cordova-res : not installed globally
native-run : 2.0.3
System:
NodeJS : v22.22.0 (/usr/bin/node-22)
npm : 11.11.1
OS : Linux 6.18
Additional Information
This seems to happen only when using a react state variable to do the date check.