Fluent UI DatePicker 格式日期日期

【问题标题】：Fluent UI DatePicker formatDate dateFluent UI DatePicker 格式日期日期
【发布时间】：2022-01-11 04:04:23
【问题描述】：

我正在使用Fluent UI 和React JSX 开展一个项目，我的问题是如何格式化DatePicker 组件的日期 为day.month.year 格式？

示例：

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

【问题讨论】：

嗨@Ștefania，欢迎来到SO。当您提出问题时，请将您的代码作为文本而不是图片，或提供 Codepen/JSFiddle 工作示例。

标签： datepicker fluent-ui fluentui-react

【解决方案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 working example.

有用的链接：

DatePicker documentation

MDN Date Object

【讨论】：