react-calendar是否支持设置月份索引从1开始？

我特意去翻了react-calendar的官方文档和社区讨论，目前确实没有官方提供的配置项能直接把月份索引从默认的0（一月对应0）改成1（一月对应1）。

这是因为react-calendar底层完全对齐了JavaScript原生Date对象的行为——JS里的月份本来就是从0开始计数的，库本身没有做额外的开关来修改这个基础逻辑。

不过你完全不用靠繁琐的手动修改来实现需求，通过简单的封装转换就能优雅解决：

1. 处理日期的传入与返回 #

不管是给日历组件传初始日期，还是处理它返回的选中日期，只需要在你的业务逻辑层做一层1-based和0-based的转换：

• 当你要传递1-based的月份（比如想设置三月=3），先减1转成0-based再传给组件
• 当从组件的onChange回调拿到日期时，把返回的0-based月份加1，转成你需要的1-based格式再使用

举个实际代码例子：

import Calendar from 'react-calendar';
import { useState } from 'react';

function CustomCalendar() {
  // 用1-based的逻辑管理本地状态
  const [selectedDate, setSelectedDate] = useState(new Date());

  const handleDateChange = (date) => {
    // 把组件返回的0-based月份转成1-based
    const targetMonth = date.getMonth() + 1;
    console.log('选中的月份（1-based）:', targetMonth);
    setSelectedDate(date);
  };

  // 手动跳转到指定的1-based月份
  const jumpToMonth = (oneBasedMonth) => {
    const updatedDate = new Date(selectedDate);
    // 转成0-based后设置月份
    updatedDate.setMonth(oneBasedMonth - 1);
    setSelectedDate(updatedDate);
  };

  return (
    <div>
      <Calendar onChange={handleDateChange} value={selectedDate} />
      <button onClick={() => jumpToMonth(3)}>跳转到三月（1-based）</button>
    </div>
  );
}

2. 自定义月份显示格式 #

如果需要在日历的标题里直接显示1-based的月份数字（比如让三月显示为“3月”而不是底层的索引2），可以用组件提供的formatMonth自定义格式化函数：

<Calendar
  formatMonth={(locale, date) => {
    const oneBasedMonth = date.getMonth() + 1;
    // 你可以根据需要调整格式，比如适配不同语言
    return `${oneBasedMonth}月`;
  }}
/>

这种方式既符合库的设计规范，又能完美满足你1-based月份索引的需求，比手动修改组件源码要靠谱得多。

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