Fluent UI React v9 DatePicker设置默认值后高亮日期不更新如何解决？

开发者阿泽

2026-6-24

解决Fluent UI React v9 DatePicker默认值设置后高亮日期不更新的问题

问题说明

使用Fluent UI React v9的DatePicker组件时，会遇到两种矛盾的场景：

直接给value属性设置固定默认值，文本输入框能显示初始日期，但选择日期面板中的任意日期时，面板上的高亮日期（即面板中被选中、带有特殊样式的日期）不会同步更新
仅设置initialDatePicker值时，高亮日期会随选择变化，但文本输入框不会显示初始日期

问题原因

这是因为给value赋固定值时，组件进入受控模式，但缺少状态更新逻辑：受控组件的显示状态完全由传入的value决定，只要value不发生变化，日期面板就会一直渲染初始的高亮状态，无法响应选择操作。

解决方案

无需额外重新渲染组件，只需正确实现受控模式的标准逻辑即可：

用useState管理日期状态，将初始值设为需要的默认日期
给DatePicker绑定onChange事件，在回调中更新状态值

示例代码

import { DatePicker } from '@fluentui/react-components';
import { useState } from 'react';

export default function DatePickerDefaultValueExample() {
  // 初始化状态为目标默认日期
  const [selectedDate, setSelectedDate] = useState(new Date('2024-05-15'));

  const handleDateChange = (_, data) => {
    // 选择新日期时同步更新状态
    setSelectedDate(data.value);
  };

  return (
    <DatePicker
      label="选择日期"
      value={selectedDate}
      onChange={handleDateChange}
    />
  );
}