如何在react-date-range控件中切换至左侧日历（解决minDate场景显示问题）

当设置minDate为昨日以禁用过往日期时，日历默认聚焦到昨日会导致当前日期显示在右侧，可通过以下步骤调整视图：

1. 强制初始聚焦到当前日期
   使用initialFocusedDate属性指定日历打开时的聚焦日期为当前日期，确保视图以今日为基准展示。
2. 绑定选中日期与日历聚焦
   通过calendarFocus属性关联选中的开始日期，让日历始终跟随选中的当前日期调整视图。

完整代码示例 #

import { useState } from 'react';
import { DateRangePicker, Range } from 'react-date-range';
import 'react-date-range/dist/styles.css';
import 'react-date-range/dist/theme/default.css';

function DatePickerComponent() {
  const today = new Date();
  const yesterday = new Date(today);
  yesterday.setDate(today.getDate() - 1);

  const [selection, setSelection] = useState([
    {
      startDate: today,
      endDate: null,
      key: 'selection',
    },
  ]);

  return (
    <DateRangePicker
      ranges={selection}
      onChange={(item) => setSelection([item.selection])}
      minDate={yesterday}
      initialFocusedDate={today}
      calendarFocus="startDate"
    />
  );
}

export default DatePickerComponent;

补充说明 #

• 若使用旧版本react-date-range可能存在视图偏移问题，建议升级至最新稳定版。
• 该方案会让当前日期显示在日历视图的左侧区域，同时保持所有昨日之前的日期处于禁用状态，符合预期显示效果。

内容的提问来源于stack exchange，提问作者Abhijit Desai