react-datepicker中showPreviousMonths异常：修复上月显示与日期选择问题

问题原因 #

showPreviousMonths属性的设计逻辑并非用来控制显示指定数量的上月，它会让日历显示当前视图之前的所有月份（数量由monthsShown决定），这就导致你设置monthsShown={4}后出现4个上月的问题。同时该属性会修改日历的交互逻辑，使得点击日期时触发视图切换而非选中操作，最终出现无法选中日期的异常。

实现步骤 #

要实现「显示2个上月 + 选中日期在中间」的需求，我们需要通过calendarStartDate属性自定义日历视图的起始月份，而非使用showPreviousMonths：

• 移除showPreviousMonths属性，恢复日历的正常交互逻辑
• 基于选中日期计算日历视图的起始月份（选中日期往前推2个月）
• 监听选中日期的变化，动态更新日历起始月份，确保选中日期始终处于视图中间

完整代码示例 #

import { useState, useEffect } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

export const CalendarFeature = () => {
  const [startDate, setStartDate] = useState(new Date());
  const [endDate, setEndDate] = useState<Date | null>(null);
  const [calendarStart, setCalendarStart] = useState<Date>(() => {
    // 初始时，从选中日期往前推2个月作为日历起始
    const initStart = new Date(startDate);
    initStart.setMonth(initStart.getMonth() - 2);
    return initStart;
  });

  // 选中日期变化时，重新计算日历起始月份，保持选中日期在视图中间
  useEffect(() => {
    const newCalendarStart = new Date(startDate);
    newCalendarStart.setMonth(newCalendarStart.getMonth() - 2);
    setCalendarStart(newCalendarStart);
  }, [startDate]);

  const onChange = (dates: [Date, Date | null]) => {
    const [newStart, newEnd] = dates;
    setStartDate(newStart);
    setEndDate(newEnd);
  };

  return (
    <DatePicker
      locale='ru'
      selected={startDate}
      onChange={onChange}
      startDate={startDate}
      endDate={endDate}
      selectsRange
      monthsShown={4}
      calendarStartDate={calendarStart}
      inline
    />
  );
};

效果说明 #

• 日历会固定显示：选中日期前2个月、前1个月、选中日期所在月、选中日期后1个月，共4个月
• 无论选中哪个日期，该日期都会处于视图的中间位置（第3个月份）
• 日期选择交互恢复正常，点击日期可正确选中并更新范围

内容的提问来源于stack exchange，提问作者Some person