diff --git a/packages/main/cypress/specs/DatePicker.cy.tsx b/packages/main/cypress/specs/DatePicker.cy.tsx
index 4a1f01602864..cea1694d5558 100644
--- a/packages/main/cypress/specs/DatePicker.cy.tsx
+++ b/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();
+
+ cy.get("[ui5-date-picker]")
+ .shadow()
+ .find("[ui5-datetime-input]")
+ .should("have.attr", "part", "input");
+ });
+});
\ No newline at end of file
diff --git a/packages/main/cypress/specs/TimePicker.cy.tsx b/packages/main/cypress/specs/TimePicker.cy.tsx
index b2d96e1f399e..6849a81efbaf 100644
--- a/packages/main/cypress/specs/TimePicker.cy.tsx
+++ b/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();
+
+ cy.get("[ui5-time-picker]")
+ .shadow()
+ .find("[ui5-datetime-input]")
+ .should("have.attr", "part", "input");
+ });
});
\ No newline at end of file
diff --git a/packages/main/src/DatePicker.ts b/packages/main/src/DatePicker.ts
index b3281a78c4d8..5f6e0b5e59e9 100644
--- a/packages/main/src/DatePicker.ts
+++ b/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({
diff --git a/packages/main/src/DatePickerInputTemplate.tsx b/packages/main/src/DatePickerInputTemplate.tsx
index cef6e36c8128..d1cc46e08b54 100644
--- a/packages/main/src/DatePickerInputTemplate.tsx
+++ b/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}
diff --git a/packages/main/src/TimePicker.ts b/packages/main/src/TimePicker.ts
index 723b42ea7299..4b48bf3e5940 100644
--- a/packages/main/src/TimePicker.ts
+++ b/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",
diff --git a/packages/main/src/TimePickerTemplate.tsx b/packages/main/src/TimePickerTemplate.tsx
index 8f0fc39e2dd9..d48123e7ffdd 100644
--- a/packages/main/src/TimePickerTemplate.tsx
+++ b/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}
diff --git a/packages/main/test/pages/styles/DatePicker.css b/packages/main/test/pages/styles/DatePicker.css
index 5abb4db30720..db8f5543c177 100644
--- a/packages/main/test/pages/styles/DatePicker.css
+++ b/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);
diff --git a/packages/main/test/pages/styles/DateRangePicker.css b/packages/main/test/pages/styles/DateRangePicker.css
index 7cf005729231..ecbca3e5ebef 100644
--- a/packages/main/test/pages/styles/DateRangePicker.css
+++ b/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);
}
diff --git a/packages/main/test/pages/styles/TimePicker.css b/packages/main/test/pages/styles/TimePicker.css
index fbddb5f3af96..27b4185b8526 100644
--- a/packages/main/test/pages/styles/TimePicker.css
+++ b/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);
}