流畅的 UI DatePicker 格式日期日期

Question

我正在开发一个使用 Fluent UI 和

React JSX

的项目，我的问题是如何将 DatePicker 组件的 格式化日期 为

day.month.year

格式？

示例：

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

Answer 1

如果您想格式化

DatePicker Component

的日期，请使用

formatDate

方法：

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 工作示例.

有用的链接：

DatePicker 文档

MDN 日期对象

Answer 2

这对我有用，并根据区域设置显示格式化日期：

formatDate={(date?: Date) => date.toLocaleDateString()}