feat(datetime): add parts support for placeholder, text (#20930)

core/api.txt

@@ -337,6 +337,8 @@ ion-datetime,css-prop,--padding-end
 ion-datetime,css-prop,--padding-start
 ion-datetime,css-prop,--padding-top
 ion-datetime,css-prop,--placeholder-color
+ion-datetime,part,placeholder
+ion-datetime,part,text
 
 ion-fab,shadow
 ion-fab,prop,activated,boolean,false,false,false

core/src/components/datetime/datetime.tsx

@@ -10,6 +10,9 @@ import { DatetimeData, LocaleData, convertDataToISO, convertFormatToKey, convert
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ *
+ * @part text - The value of the datetime.
+ * @part placeholder - The placeholder of the datetime.
  */
 @Component({
   tag: 'ion-datetime',
@@ -609,6 +612,10 @@ export class Datetime implements ComponentInterface {
       ? (placeholder != null ? placeholder : '')
       : text;
 
+    const datetimeTextPart = text === undefined
+      ? (placeholder != null ? 'placeholder' : undefined)
+      : 'text';
+
     if (label) {
       label.id = labelId;
     }
@@ -631,7 +638,7 @@ export class Datetime implements ComponentInterface {
           'in-item': hostContext('ion-item', el)
         }}
       >
-        <div class="datetime-text">{datetimeText}</div>
+        <div class="datetime-text" part={datetimeTextPart}>{datetimeText}</div>
         <button
           type="button"
           onFocus={this.onFocus}

core/src/components/datetime/readme.md

@@ -725,6 +725,14 @@ Type: `Promise<void>`
 
 
 
+## Shadow Parts
+
+| Part            | Description                      |
+| --------------- | -------------------------------- |
+| `"placeholder"` | The placeholder of the datetime. |
+| `"text"`        | The value of the datetime.       |
+
+
 ## CSS Custom Properties
 
 | Name                  | Description                                                                                                 |

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

@@ -39,7 +39,7 @@
 
         <ion-item>
           <ion-label position="floating">Placeholder with floating label</ion-label>
-          <ion-datetime placeholder="Select a date"></ion-datetime>
+          <ion-datetime id="datetime-part" placeholder="Select a date"></ion-datetime>
         </ion-item>
 
         <ion-item>
@@ -178,6 +178,14 @@
       .outer-content {
         --background: #f2f2f2;
       }
+
+      ion-datetime#datetime-part::part(placeholder) {
+        color: rgba(255, 0, 0, 0.5);
+      }
+
+      ion-datetime#datetime-part::part(text) {
+        color: green;
+      }
     </style>
 
     <script>