fix(ui5-date-picker): add input CSS part for styling (#12559)

fix(ui5-date-picker): add input CSS part for styling #12559

Add input CSS part to DatePicker and TimePicker components to allow
styling of the native input element using ::part(input) selector.

- Add @csspart input documentation for both components
- Forward part attribute to DateTimeInput in templates
- Maintains consistency with ui5-input component API
- Enables scoping-friendly styling without deep selectors

Author: unazko

packages/main/cypress/specs/DatePicker.cy.tsx

@@ -1937,3 +1937,14 @@ describe("Accessibility", () => {
 			.should("have.text", DESCRIPTION);
 	});
 });
+
+describe("CSS Parts", () => {
+	it("DatePicker exposes input CSS part through DateTimeInput", () => {
+		cy.mount(<DatePicker />);
+
+		cy.get<DatePicker>("[ui5-date-picker]")
+			.shadow()
+			.find("[ui5-datetime-input]")
+			.should("have.attr", "part", "input");
+	});
+});

packages/main/cypress/specs/TimePicker.cy.tsx

@@ -543,4 +543,15 @@ describe("Validation inside a form", () => {
 		cy.get("#timePicker:invalid")
 			.should("not.exist", "Timepicker with correct formatted value should not have :invalid CSS class");
 	});
+});
+
+describe("CSS Parts", () => {
+	it("TimePicker exposes input CSS part through DateTimeInput", () => {
+		cy.mount(<TimePicker />);
+
+		cy.get<TimePicker>("[ui5-time-picker]")
+			.shadow()
+			.find("[ui5-datetime-input]")
+			.should("have.attr", "part", "input");
+	});
 });

packages/main/src/DatePicker.ts

@@ -175,6 +175,7 @@ type Picker = "day" | "month" | "year";
  * @constructor
  * @extends DateComponentBase
  * @public
+ * @csspart input - Used to style the input element. This part is forwarded to the underlying ui5-input element.
  */
 
 @customElement({

packages/main/src/DatePickerInputTemplate.tsx

@@ -14,6 +14,7 @@ export default function DatePickerInputTemplate(this: DatePicker) {
 				data-sap-focus-ref
 				id={`${this._id}-inner`}
 				class="ui5-date-picker-input"
+				part="input"
 				placeholder={this._placeholder}
 				type={this.type}
 				value={this.displayValue}

packages/main/src/TimePicker.ts

@@ -138,6 +138,7 @@ type TimePickerInputEventDetail = TimePickerChangeInputEventDetail;
  * @extends UI5Element
  * @public
  * @since 1.0.0-rc.6
+ * @csspart input - Used to style the input element. This part is forwarded to the underlying ui5-input element.
  */
 @customElement({
 	tag: "ui5-time-picker",

packages/main/src/TimePickerTemplate.tsx

@@ -12,6 +12,7 @@ export default function TimePickerTemplate(this: TimePicker) {
 					data-sap-focus-ref
 					id={`${this._id}-inner`}
 					class="ui5-time-picker-input"
+					part="input"
 					value={this.value}
 					placeholder={this._placeholder}
 					disabled={this.disabled}

packages/main/test/pages/styles/DatePicker.css

@@ -6,6 +6,8 @@
     background-color: var(--sapBackgroundColor);
 }
 
+#dp6::part(input) {
+    text-align: right;
 
 form ui5-date-picker:invalid {
     outline: 2px solid var(--sapNegativeColor);

packages/main/test/pages/styles/DateRangePicker.css

@@ -6,6 +6,9 @@
     background-color: var(--sapBackgroundColor);
 }
 
+#drpLabel::part(input) {
+    text-align: right;
+}
 form ui5-daterange-picker:invalid {
     outline: 2px solid var(--sapNegativeColor);
 }

packages/main/test/pages/styles/TimePicker.css

@@ -23,6 +23,9 @@ html,body {
     width: 100%
 }
 
+#tpLabel::part(input) {
+    text-align: right;
+}
 form ui5-time-picker:invalid {
     outline: 2px solid var(--sapNegativeColor);
 }