feat: Add datePlaceholder and timePlaceholder props to date-range-picker component's i18nStrings

pages/date-range-picker/absolute-format-all-locales.page.tsx

@@ -13,6 +13,7 @@ const rtlLocales = new Set(['ar', 'he']);
 
 export default function DateRangePickerScenario() {
   const { props, settings, setSettings } = useDateRangePickerSettings({ rangeSelectorMode: 'absolute-only' });
+
   return (
     <SimplePage
       title="Date range picker: all locales for absolute format"

pages/date-range-picker/common.tsx

@@ -184,6 +184,8 @@ export function useDateRangePickerSettings(
     endDateLabel: 'End date',
     startTimeLabel: 'Start time',
     endTimeLabel: 'End time',
+    datePlaceholder: undefined, // Use default format-based placeholder
+    timePlaceholder: undefined, // Use default format-based placeholder
     clearButtonLabel: 'Clear and dismiss',
     cancelButtonLabel: 'Cancel',
     applyButtonLabel: 'Apply',

pages/date-range-picker/localised.page.tsx

@@ -22,6 +22,7 @@ const localizedErrors = {
 
 export default function DatePickerScenario() {
   const { props, settings, setSettings } = useDateRangePickerSettings({ hasValue: false });
+
   return (
     <SimplePage
       title="Date range picker: localized"
@@ -31,8 +32,7 @@ export default function DatePickerScenario() {
       <FormField label="Date Range Picker field">
         <DateRangePicker
           {...props}
-          locale={undefined}
-          i18nStrings={undefined}
+          locale="de"
           placeholder="Nach einem Zeitraum filtern"
           isValidRange={value =>
             props.granularity === 'month'

src/date-range-picker/calendar/interfaces.ts

@@ -28,6 +28,8 @@ export type RangeCalendarI18nStrings = Pick<
   | 'isoMonthConstraintText'
   | 'slashedMonthConstraintText'
   | 'renderSelectedAbsoluteRangeAriaLive'
+  | 'datePlaceholder'
+  | 'timePlaceholder'
 >;
 
 export interface DateRangePickerCalendarProps

src/date-range-picker/calendar/range-inputs.tsx

@@ -34,7 +34,9 @@ export default function RangeInputs({
   const showTimeInput = !dateOnly && !isMonthPicker;
   const isIso = dateInputFormat === 'iso';
   const separator = isIso ? '-' : '/';
-  const dateInputPlaceholder = `YYYY${separator}MM${isMonthPicker ? '' : `${separator}DD`}`;
+  const defaultDateInputPlaceholder = `YYYY${separator}MM${isMonthPicker ? '' : `${separator}DD`}`;
+  const datePlaceholder = i18nStrings?.datePlaceholder || defaultDateInputPlaceholder;
+  const timePlaceholder = i18nStrings?.timePlaceholder || timeInputFormat;
   const i18nProvided = provideI18N(i18nStrings!, isMonthPicker, dateOnly, isIso);
   const i18nKey = generateI18NKey(isMonthPicker, dateOnly, isIso);
   const i18nFallbackKey = generateI18NFallbackKey(isMonthPicker, dateOnly);
@@ -54,7 +56,7 @@ export default function RangeInputs({
               className={clsx(testutilStyles['start-date-input'], isMonthPicker && testutilStyles['start-month-input'])}
               onChange={event => onChangeStartDate(event.detail.value)}
               format={dateInputFormat}
-              placeholder={dateInputPlaceholder}
+              placeholder={datePlaceholder}
               granularity={granularity}
             />
           </InternalFormField>
@@ -64,7 +66,7 @@ export default function RangeInputs({
                 value={startTime}
                 onChange={event => onChangeStartTime(event.detail.value)}
                 format={timeInputFormat}
-                placeholder={timeInputFormat}
+                placeholder={timePlaceholder}
                 className={testutilStyles['start-time-input']}
               />
             </InternalFormField>
@@ -84,7 +86,7 @@ export default function RangeInputs({
               className={clsx(testutilStyles['end-date-input'], isMonthPicker && testutilStyles['end-month-picker'])}
               onChange={event => onChangeEndDate(event.detail.value)}
               format={dateInputFormat}
-              placeholder={dateInputPlaceholder}
+              placeholder={datePlaceholder}
               granularity={granularity}
             />
           </InternalFormField>
@@ -94,7 +96,7 @@ export default function RangeInputs({
                 value={endTime}
                 onChange={event => onChangeEndTime(event.detail.value)}
                 format={timeInputFormat}
-                placeholder={timeInputFormat}
+                placeholder={timePlaceholder}
                 className={testutilStyles['end-time-input']}
               />
             </InternalFormField>

src/date-range-picker/interfaces.ts

@@ -570,6 +570,22 @@ export namespace DateRangePickerProps {
      * @i18n
      */
     previousYearAriaLabel?: string;
+
+    /**
+     * Placeholder text for date inputs in absolute mode.
+     * Should match the expected date format (for example "YYYY-MM-DD", "JJJJ-MM-TT" for German).
+     * Used for both start and end date inputs.
+     * @i18n
+     */
+    datePlaceholder?: string;
+
+    /**
+     * Placeholder text for time inputs in absolute mode.
+     * Should match the expected time format (for example "hh:mm:ss", "HH:MM:SS").
+     * Used for both start and end time inputs.
+     * @i18n
+     */
+    timePlaceholder?: string;
   }
 
   export type AbsoluteFormat = DateFormat;

src/i18n/messages/all.ar.json

@@ -463,4 +463,4 @@
     "i18nStrings.nextButtonLoadingAnnouncement": "تحميل الخطوة التالية",
     "i18nStrings.submitButtonLoadingAnnouncement": "إرسال النموذج"
   }
-}
+}

src/i18n/messages/all.de.json

@@ -463,4 +463,4 @@
     "i18nStrings.nextButtonLoadingAnnouncement": "Nächster Schritt wird geladen",
     "i18nStrings.submitButtonLoadingAnnouncement": "Absenden des Formulars"
   }
-}
+}

src/i18n/messages/all.en-GB.json

@@ -463,4 +463,4 @@
     "i18nStrings.nextButtonLoadingAnnouncement": "Loading next step",
     "i18nStrings.submitButtonLoadingAnnouncement": "Submitting form"
   }
-}
+}

src/i18n/messages/all.en.json

@@ -134,6 +134,8 @@
     "i18nStrings.openCalendarAriaLabel": "{selectedDate, select, none {Choose date} other {Choose date, selected date is {selectedDate}}}"
   },
   "date-range-picker": {
+    "i18nStrings.datePlaceholder": "YYYY-MM-DD",
+    "i18nStrings.timePlaceholder": "hh:mm:ss",
     "i18nStrings.relativeModeTitle": "Relative mode",
     "i18nStrings.absoluteModeTitle": "Absolute mode",
     "i18nStrings.relativeRangeSelectionHeading": "Choose a range",
@@ -463,4 +465,4 @@
     "i18nStrings.nextButtonLoadingAnnouncement": "Loading next step",
     "i18nStrings.submitButtonLoadingAnnouncement": "Submitting form"
   }
-}
+}

src/i18n/messages/all.es.json

@@ -463,4 +463,4 @@
     "i18nStrings.nextButtonLoadingAnnouncement": "Cargando paso siguiente",
     "i18nStrings.submitButtonLoadingAnnouncement": "Formulario de envío"
   }
-}
+}

src/i18n/messages/all.fr.json

@@ -463,4 +463,4 @@
     "i18nStrings.nextButtonLoadingAnnouncement": "Chargement de l'étape suivante",
     "i18nStrings.submitButtonLoadingAnnouncement": "Soumission du formulaire"
   }
-}
+}

src/i18n/messages/all.id.json

@@ -463,4 +463,4 @@
     "i18nStrings.nextButtonLoadingAnnouncement": "Memuat langkah berikutnya",
     "i18nStrings.submitButtonLoadingAnnouncement": "Mengirimkan formulir"
   }
-}
+}

src/i18n/messages/all.it.json

@@ -463,4 +463,4 @@
     "i18nStrings.nextButtonLoadingAnnouncement": "Caricamento della fase successiva",
     "i18nStrings.submitButtonLoadingAnnouncement": "Modulo di invio"
   }
-}
+}

src/i18n/messages/all.ja.json

@@ -463,4 +463,4 @@
     "i18nStrings.nextButtonLoadingAnnouncement": "次のステップをロード中",
     "i18nStrings.submitButtonLoadingAnnouncement": "フォーム送信"
   }
-}
+}

src/i18n/messages/all.ko.json

@@ -463,4 +463,4 @@
     "i18nStrings.nextButtonLoadingAnnouncement": "다음 단계 로드 중",
     "i18nStrings.submitButtonLoadingAnnouncement": "양식 제출 중"
   }
-}
+}

src/i18n/messages/all.pt-BR.json

@@ -463,4 +463,4 @@
     "i18nStrings.nextButtonLoadingAnnouncement": "Carregando próxima etapa",
     "i18nStrings.submitButtonLoadingAnnouncement": "Enviando formulário"
   }
-}
+}

src/i18n/messages/all.th.json

@@ -361,4 +361,4 @@
     "i18nStrings.nextButtonLoadingAnnouncement": "กำลังโหลดขั้นตอนถัดไป",
     "i18nStrings.submitButtonLoadingAnnouncement": "กำลังส่งแบบฟอร์ม"
   }
-}
+}

src/i18n/messages/all.tr.json

@@ -463,4 +463,4 @@
     "i18nStrings.nextButtonLoadingAnnouncement": "Sonraki adım yükleniyor",
     "i18nStrings.submitButtonLoadingAnnouncement": "Form gönderiliyor"
   }
-}
+}

src/i18n/messages/all.zh-CN.json

@@ -463,4 +463,4 @@
     "i18nStrings.nextButtonLoadingAnnouncement": "正在加载下一步",
     "i18nStrings.submitButtonLoadingAnnouncement": "正在提交表单"
   }
-}
+}

src/i18n/messages/all.zh-TW.json

@@ -463,4 +463,4 @@
     "i18nStrings.nextButtonLoadingAnnouncement": "載入下一個步驟",
     "i18nStrings.submitButtonLoadingAnnouncement": "提交表單"
   }
-}
+}