DatePicker with German localization

As it turned out, FluentUI DatePicker for React doesn't contain a built-in German localization. If you need one, you can use my version.

First, you should create and fill the property 'IDatePickerProps.strings?: IDatePickerStrings' with translations.

export const dayPickerGermanStrings = {
    months: [
      'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni',
      'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'
    ],
    shortMonths: [
      'Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun',
      'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'
    ],
    days: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
    shortDays: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
    goToToday: 'Heute',
    weekNumberFormatString: 'Woche {0}',
    prevMonthAriaLabel: 'Vorheriger Monat',
    nextMonthAriaLabel: 'Nächster Monat',
    prevYearAriaLabel: 'Vorheriges Jahr',
    nextYearAriaLabel: 'Nächstes Jahr',
    closeButtonAriaLabel: 'Schließen',
    monthPickerHeaderAriaLabel: '{0}, wähle einen Monat',
    yearPickerHeaderAriaLabel: '{0}, wähle ein Jahr',
    isRequiredErrorMessage: 'Pflichtfeld.',
    invalidInputErrorMessage: 'Ungültiges Datum.',
    isOutOfBoundsErrorMessage: 'Datum liegt außerhalb des zulässigen Bereichs.',
  };

Second, you also need to set the actual first day of the week. For Germany it's Monday. It can be done with setting the property 'IDatePickerProps.firstDayOfWeek?: DayOfWeek'

Third, you should set the formatDate with the property 'IDatePickerProps.formatDate?: (date?: Date) => string'

The full code of the example is

<DatePicker
	strings={dayPickerGermanStrings}
	firstDayOfWeek={DayOfWeek.Monday}
// Custom styles
	styles={{
		root: {
		fontFamily: 'inherit',
		color: 'inherit',
	},
	statusMessage: {
		fontWeight: 'normal'
	} }}
	value={moment(eventItem.ExpirationDate).toDate()}
	formatDate={(data) => {
		return moment(data).format('DD.MM.YYYY')
	}}
	borderless={true}
/>

The DatePicker component looks like this: