- {this.selectionMode !== "none" ? (
+ {selectionMode !== "none" ? (
) : null}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages.json
index dfa25e049e5..ab174e92d5b 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "Choose date"
+ "chooseDate": "Choose date",
+ "dateFormat": "Date Format:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_en.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_en.json
index dfa25e049e5..ab174e92d5b 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_en.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_en.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "Choose date"
+ "chooseDate": "Choose date",
+ "dateFormat": "Date Format:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss b/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss
index 8fcb8292dcf..e36b4e6c476 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss
@@ -153,3 +153,7 @@
}
@include hidden-form-input();
+
+.assistive-text {
+ @apply sr-only;
+}
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
index 042ad226303..f3f5a023608 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
@@ -528,6 +528,7 @@ export class InputDatePicker
{this.renderToggleIcon(this.open && this.focusedInput === "start")}
+
+ Date Format: {this.localeData?.placeholder}
+