如何在react-datepicker中切换月份视图且不修改选中日期？

react-datepicker 内部的显示月份视图和选中日期是两个独立状态，官方没有直接暴露修改显示月份的API，但可以通过以下两种方式实现需求：

核心思路 #

通过监听日历点击事件，判断点击的是外部月份（react-datepicker__day--outside-month类名）的日期，然后切换视图月份，同时阻止默认的选中日期逻辑。

方案一：通过类名判断+手动更新显示月份 #

利用onCalendarClick事件捕获点击元素，判断是否为外部月份日期，再更新显示的月份，阻止默认选中行为：

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { useState } from "react";

const CustomDatePicker = () => {
  const [selectedDate, setSelectedDate] = useState(null);
  // 控制显示的月份视图，初始化为当前日期
  const [displayedMonth, setDisplayedMonth] = useState(new Date());

  const handleCalendarClick = (e) => {
    // 判断是否点击了外部月份的日期
    const isOutsideMonth = e.target.classList.contains("react-datepicker__day--outside-month");
    if (isOutsideMonth) {
      // 获取点击的日期，通过aria-label属性解析
      const clickedDate = new Date(e.target.getAttribute("aria-label"));
      // 更新显示的月份视图
      setDisplayedMonth(clickedDate);
      // 阻止事件冒泡，避免触发默认的日期选中逻辑
      e.stopPropagation();
    }
  };

  return (
    <DatePicker
      selected={selectedDate}
      onChange={setSelectedDate}
      // 同步头部导航切换的月份
      onChangeMonth={(month) => setDisplayedMonth(month)}
      onCalendarClick={handleCalendarClick}
      renderCustomHeader={({ date, decreaseMonth, increaseMonth }) => (
        <div className="custom-header">
          <button onClick={decreaseMonth}>←</button>
          <span>{date.toLocaleString("default", { month: "long", year: "numeric" })}</span>
          <button onClick={increaseMonth}>→</button>
        </div>
      )}
      dateFormat="yyyy-MM-dd"
    />
  );
};

方案二：通过Ref调用内部增减月份方法 #

react-datepicker的实例内部提供了increaseMonth/decreaseMonth方法，可以通过ref获取日历实例，直接调用方法切换视图：

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { useState, useRef } from "react";

const CustomDatePicker = () => {
  const [selectedDate, setSelectedDate] = useState(null);
  const pickerRef = useRef(null);

  const handleCalendarClick = (e) => {
    const isOutsideMonth = e.target.classList.contains("react-datepicker__day--outside-month");
    if (isOutsideMonth) {
      const clickedDate = new Date(e.target.getAttribute("aria-label"));
      const currentDisplayMonth = pickerRef.current?.calendar?.state?.currentDate;
      
      // 判断点击的是上一个月还是下一个月的外部日期
      if (clickedDate.getMonth() > currentDisplayMonth.getMonth() || 
          (clickedDate.getMonth() === 0 && currentDisplayMonth.getMonth() === 11)) {
        pickerRef.current.calendar.increaseMonth();
      } else {
        pickerRef.current.calendar.decreaseMonth();
      }
      e.stopPropagation();
    }
  };

  return (
    <DatePicker
      ref={pickerRef}
      selected={selectedDate}
      onChange={setSelectedDate}
      onCalendarClick={handleCalendarClick}
      renderCustomHeader={({ date, decreaseMonth, increaseMonth }) => (
        <div className="custom-header">
          <button onClick={decreaseMonth}>←</button>
          <span>{date.toLocaleString("default", { month: "long", year: "numeric" })}</span>
          <button onClick={increaseMonth}>→</button>
        </div>
      )}
      dateFormat="yyyy-MM-dd"
    />
  );
};

注意：此方案依赖组件内部私有属性/方法，版本更新可能导致失效，需注意兼容性。

对你尝试过的方案的补充说明 #

1. 聚焦选中日期的问题：focus()无法精准区分外部月份日期，且依赖选中日期存在，改用onCalendarClick结合类名判断可以彻底解决这个问题。
2. onMonthChange绑定setSelectedDate的问题：onMonthChange是用来监听视图月份变化的，绑定setSelectedDate会导致选中日期被修改，正确做法是用它同步显示月份的状态，而非选中日期。

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