feat(datetime): add disabled part (#28134)

core/api.txt

@@ -430,6 +430,7 @@ ion-datetime,css-prop,--wheel-fade-background-rgb
 ion-datetime,css-prop,--wheel-highlight-background
 ion-datetime,part,calendar-day
 ion-datetime,part,calendar-day active
+ion-datetime,part,calendar-day disabled
 ion-datetime,part,calendar-day today
 ion-datetime,part,month-year-button
 ion-datetime,part,time-button

core/src/components/datetime/datetime.tsx

@@ -90,6 +90,7 @@ import {
  * calendar.
  * @part calendar-day active - The currently selected calendar day.
  * @part calendar-day today - The calendar day that contains the current day.
+ * @part calendar-day disabled - The calendar day that is disabled.
  */
 @Component({
   tag: 'ion-datetime',
@@ -2126,7 +2127,9 @@ export class Datetime implements ComponentInterface {
             // "Filler days" at the beginning of the grid should not get the calendar day
             // CSS parts added to them
             if (!isCalendarPadding) {
-              dateParts = `calendar-day${isActive ? ' active' : ''}${isToday ? ' today' : ''}`;
+              dateParts = `calendar-day${isActive ? ' active' : ''}${isToday ? ' today' : ''}${
+                isCalDayDisabled ? ' disabled' : ''
+              }`;
             }
 
             return (

core/src/components/datetime/test/custom/index.html

@@ -99,6 +99,11 @@
         box-shadow: 0px 0px 0px 4px rgb(154 209 98 / 0.2);
       }
 
+      #custom-calendar-days::part(calendar-day disabled) {
+        background: rgba(0 0 0 / 0.2);
+        color: black;
+      }
+
       /*
       * Custom Material Design Datetime Day Parts
       * -------------------------------------------
@@ -190,6 +195,14 @@
           backgroundColor: 'lightblue',
         },
       ];
+
+      customDatetime.isDateEnabled = (date) => {
+        if (date === '2023-06-22') {
+          return false;
+        }
+
+        return true;
+      };
     </script>
   </body>
 </html>