如何将Fluent UI DatePicker组件日期设置为day.month.year格式？

你提供的示例代码存在几处问题，调整后即可实现day.month.year格式的日期展示：

1. getMonth()返回值范围为0-11，需要+1才能对应实际的1-12月
2. getFullYear是方法，必须加()调用才能获取到正确的年份数值
3. 原有写法的日期顺序是月.日.年，和你需要的日.月.年顺序不符

最终实现代码 #

如果无需给个位数的日、月补前导零（例：输出3.5.2024），可以直接使用简化写法：

<DatePicker
  // 其他原有配置保持不变
  formatDate={(date) => {
    return `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`
  }}
/>

如果需要给个位数的日、月补前导零（例：输出03.05.2024），可以补充字符串补位逻辑：

<DatePicker
  // 其他原有配置保持不变
  formatDate={(date) => {
    const day = String(date.getDate()).padStart(2, '0')
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const year = date.getFullYear()
    return `${day}.${month}.${year}`
  }}
/>

补充配置（支持手动输入） #

如果需要支持用户手动输入day.month.year格式的日期，还需要同步配置parseDateFromString属性，避免组件解析输入内容时报错：

<DatePicker
  formatDate={(date) => {
    const day = String(date.getDate()).padStart(2, '0')
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const year = date.getFullYear()
    return `${day}.${month}.${year}`
  }}
  parseDateFromString={(dateStr) => {
    const [day, month, year] = dateStr.split('.').map(Number)
    // 月份需减1适配Date对象的规则
    return new Date(year, month - 1, day)
  }}
/>

内容的提问来源于stack exchange，提问作者Ștefania