docs(datetime): update part names

thetaPC · thetaPC · commit 9988ddd11d69 · 2026-02-18T14:10:14.000-08:00
diff --git a/static/usage/v8/datetime/styling/calendar-header/angular/example_component_css.md b/static/usage/v8/datetime/styling/calendar-header/angular/example_component_css.md
@@ -11,19 +11,19 @@ ion-datetime::part(month-year-button) {
   background-color: lightblue;
 }
 
-ion-datetime::part(prev-next-buttons) {
+ion-datetime::part(navigation-button) {
   background-color: firebrick;
 }
 
-ion-datetime::part(prev-button) {
+ion-datetime::part(previous-button) {
   color: white;
 }
 
 ion-datetime::part(next-button) {
   color: black;
 }
 
-ion-datetime::part(days-of-week) {
+ion-datetime::part(calendar-days-of-week) {
   background-color: #9ad162;
   color: white;
 }
diff --git a/static/usage/v8/datetime/styling/calendar-header/demo.html b/static/usage/v8/datetime/styling/calendar-header/demo.html
@@ -23,19 +23,19 @@
         background-color: lightblue;
       }
 
-      ion-datetime::part(prev-next-buttons) {
+      ion-datetime::part(navigation-button) {
         background-color: firebrick;
       }
 
-      ion-datetime::part(prev-button) {
+      ion-datetime::part(previous-button) {
         color: white;
       }
 
       ion-datetime::part(next-button) {
         color: black;
       }
 
-      ion-datetime::part(days-of-week) {
+      ion-datetime::part(calendar-days-of-week) {
         background-color: #9ad162;
         color: white;
       }
diff --git a/static/usage/v8/datetime/styling/calendar-header/javascript.md b/static/usage/v8/datetime/styling/calendar-header/javascript.md
@@ -14,19 +14,19 @@
     background-color: lightblue;
   }
 
-  ion-datetime::part(prev-next-buttons) {
+  ion-datetime::part(navigation-button) {
     background-color: firebrick;
   }
 
-  ion-datetime::part(prev-button) {
+  ion-datetime::part(previous-button) {
     color: white;
   }
 
   ion-datetime::part(next-button) {
     color: black;
   }
 
-  ion-datetime::part(days-of-week) {
+  ion-datetime::part(calendar-days-of-week) {
     background-color: #9ad162;
     color: white;
   }
diff --git a/static/usage/v8/datetime/styling/calendar-header/react/main_css.md b/static/usage/v8/datetime/styling/calendar-header/react/main_css.md
@@ -11,19 +11,19 @@ ion-datetime::part(month-year-button) {
   background-color: lightblue;
 }
 
-ion-datetime::part(prev-next-buttons) {
+ion-datetime::part(navigation-button) {
   background-color: firebrick;
 }
 
-ion-datetime::part(prev-button) {
+ion-datetime::part(previous-button) {
   color: white;
 }
 
 ion-datetime::part(next-button) {
   color: black;
 }
 
-ion-datetime::part(days-of-week) {
+ion-datetime::part(calendar-days-of-week) {
   background-color: #9ad162;
   color: white;
 }
diff --git a/static/usage/v8/datetime/styling/calendar-header/vue.md b/static/usage/v8/datetime/styling/calendar-header/vue.md
@@ -20,19 +20,19 @@
     background-color: lightblue;
   }
 
-  ion-datetime::part(prev-next-buttons) {
+  ion-datetime::part(navigation-button) {
     background-color: firebrick;
   }
 
-  ion-datetime::part(prev-button) {
+  ion-datetime::part(previous-button) {
     color: white;
   }
 
   ion-datetime::part(next-button) {
     color: black;
   }
 
-  ion-datetime::part(days-of-week) {
+  ion-datetime::part(calendar-days-of-week) {
     background-color: #9ad162;
     color: white;
   }
diff --git a/static/usage/v8/datetime/styling/datetime-header/angular/example_component_css.md b/static/usage/v8/datetime/styling/datetime-header/angular/example_component_css.md
@@ -1,9 +1,17 @@
 ```css
 /*
- * Custom Datetime Header Part
+ * Custom Datetime Header Parts
  * -------------------------------------------
  */
 ion-datetime::part(datetime-header) {
   background-color: orange;
 }
+
+ion-datetime::part(datetime-title) {
+  background-color: pink;
+}
+
+ion-datetime::part(datetime-selected-date) {
+  background-color: violet;
+}
 ```
diff --git a/static/usage/v8/datetime/styling/datetime-header/demo.html b/static/usage/v8/datetime/styling/datetime-header/demo.html
@@ -11,13 +11,21 @@
 
     <style>
       /*
-       * Custom Datetime Header Part
+       * Custom Datetime Header Parts
        * -------------------------------------------
        */
 
       ion-datetime::part(datetime-header) {
         background-color: orange;
       }
+
+      ion-datetime::part(datetime-title) {
+        background-color: pink;
+      }
+
+      ion-datetime::part(datetime-selected-date) {
+        background-color: violet;
+      }
     </style>
   </head>
 
diff --git a/static/usage/v8/datetime/styling/datetime-header/javascript.md b/static/usage/v8/datetime/styling/datetime-header/javascript.md
@@ -5,11 +5,19 @@
 
 <style>
   /*
-   * Custom Datetime Header Part
+   * Custom Datetime Header Parts
    * -------------------------------------------
    */
   ion-datetime::part(datetime-header) {
     background-color: orange;
   }
+
+  ion-datetime::part(datetime-title) {
+    background-color: pink;
+  }
+
+  ion-datetime::part(datetime-selected-date) {
+    background-color: violet;
+  }
 </style>
 ```
diff --git a/static/usage/v8/datetime/styling/datetime-header/react/main_css.md b/static/usage/v8/datetime/styling/datetime-header/react/main_css.md
@@ -1,9 +1,17 @@
 ```css
 /*
- * Custom Datetime Header Part
+ * Custom Datetime Header Parts
  * -------------------------------------------
  */
 ion-datetime::part(datetime-header) {
   background-color: orange;
 }
+
+ion-datetime::part(datetime-title) {
+  background-color: pink;
+}
+
+ion-datetime::part(datetime-selected-date) {
+  background-color: violet;
+}
 ```
diff --git a/static/usage/v8/datetime/styling/datetime-header/vue.md b/static/usage/v8/datetime/styling/datetime-header/vue.md
@@ -11,12 +11,20 @@
 
 <style scoped>
   /*
-   * Custom Datetime Header Part
+   * Custom Datetime Header Parts
    * -------------------------------------------
    */
 
   ion-datetime::part(datetime-header) {
     background-color: orange;
   }
+
+  ion-datetime::part(datetime-title) {
+    background-color: pink;
+  }
+
+  ion-datetime::part(datetime-selected-date) {
+    background-color: violet;
+  }
 </style>
 ```

Original file line number	Diff line number	Diff line change
`@@ -11,19 +11,19 @@ ion-datetime::part(month-year-button) {`
`11`	`11`	`background-color: lightblue;`
`12`	`12`	`}`
`13`	`13`
`14`		`-ion-datetime::part(prev-next-buttons) {`
	`14`	`+ion-datetime::part(navigation-button) {`
`15`	`15`	`background-color: firebrick;`
`16`	`16`	`}`
`17`	`17`
`18`		`-ion-datetime::part(prev-button) {`
	`18`	`+ion-datetime::part(previous-button) {`
`19`	`19`	`color: white;`
`20`	`20`	`}`
`21`	`21`
`22`	`22`	`ion-datetime::part(next-button) {`
`23`	`23`	`color: black;`
`24`	`24`	`}`
`25`	`25`
`26`		`-ion-datetime::part(days-of-week) {`
	`26`	`+ion-datetime::part(calendar-days-of-week) {`
`27`	`27`	`background-color: #9ad162;`
`28`	`28`	`color: white;`
`29`	`29`	`}`
Original file line number	Diff line number	Diff line change
`@@ -23,19 +23,19 @@`
`23`	`23`	`background-color: lightblue;`
`24`	`24`	`}`
`25`	`25`
`26`		`- ion-datetime::part(prev-next-buttons) {`
	`26`	`+ ion-datetime::part(navigation-button) {`
`27`	`27`	`background-color: firebrick;`
`28`	`28`	`}`
`29`	`29`
`30`		`- ion-datetime::part(prev-button) {`
	`30`	`+ ion-datetime::part(previous-button) {`
`31`	`31`	`color: white;`
`32`	`32`	`}`
`33`	`33`
`34`	`34`	`ion-datetime::part(next-button) {`
`35`	`35`	`color: black;`
`36`	`36`	`}`
`37`	`37`
`38`		`- ion-datetime::part(days-of-week) {`
	`38`	`+ ion-datetime::part(calendar-days-of-week) {`
`39`	`39`	`background-color: #9ad162;`
`40`	`40`	`color: white;`
`41`	`41`	`}`
Original file line number	Diff line number	Diff line change
`@@ -14,19 +14,19 @@`
`14`	`14`	`background-color: lightblue;`
`15`	`15`	`}`
`16`	`16`
`17`		`- ion-datetime::part(prev-next-buttons) {`
	`17`	`+ ion-datetime::part(navigation-button) {`
`18`	`18`	`background-color: firebrick;`
`19`	`19`	`}`
`20`	`20`
`21`		`- ion-datetime::part(prev-button) {`
	`21`	`+ ion-datetime::part(previous-button) {`
`22`	`22`	`color: white;`
`23`	`23`	`}`
`24`	`24`
`25`	`25`	`ion-datetime::part(next-button) {`
`26`	`26`	`color: black;`
`27`	`27`	`}`
`28`	`28`
`29`		`- ion-datetime::part(days-of-week) {`
	`29`	`+ ion-datetime::part(calendar-days-of-week) {`
`30`	`30`	`background-color: #9ad162;`
`31`	`31`	`color: white;`
`32`	`32`	`}`
Original file line number	Diff line number	Diff line change
`@@ -20,19 +20,19 @@`
`20`	`20`	`background-color: lightblue;`
`21`	`21`	`}`
`22`	`22`
`23`		`- ion-datetime::part(prev-next-buttons) {`
	`23`	`+ ion-datetime::part(navigation-button) {`
`24`	`24`	`background-color: firebrick;`
`25`	`25`	`}`
`26`	`26`
`27`		`- ion-datetime::part(prev-button) {`
	`27`	`+ ion-datetime::part(previous-button) {`
`28`	`28`	`color: white;`
`29`	`29`	`}`
`30`	`30`
`31`	`31`	`ion-datetime::part(next-button) {`
`32`	`32`	`color: black;`
`33`	`33`	`}`
`34`	`34`
`35`		`- ion-datetime::part(days-of-week) {`
	`35`	`+ ion-datetime::part(calendar-days-of-week) {`
`36`	`36`	`background-color: #9ad162;`
`37`	`37`	`color: white;`
`38`	`38`	`}`