Fluent UI DatePicker formatDate date

Question

I am working on a project with Fluent UI and React JSX and my question is how to format date of DatePicker component to be day.month.year format?

Example:

<DatePicker
  ...
  formatDate={(date) => {
    return (date.getMonth() + "." + date.getDate() + "." + date.getFullYear)
  }}
/>

Answer 1

If you want to format date of DatePicker Component use formatDate method:

const formatDate = (date?: Date): string => {
  if (!date) return '';
  const month = date.getMonth() + 1; // + 1 because 0 indicates the first Month of the Year.
  const day = date.getDate();
  const year = date.getFullYear();

  return `${day}.${month}.${year}`;
}

<DatePicker
  ...
  formatDate={formatDate}
/>

Codepen working example.

Useful links:

DatePicker documentation

MDN Date Object