You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React日历指定月份:react-multi-date-picker默认当前月问题求助

解决react-multi-date-picker指定起始/结束月份的问题

要指定日历的起始和结束月份,可通过以下关键配置实现:

1. 初始化日历默认显示的起始月份

修改useState的初始值,将DateObject指定为你想要的起始月份(注意月份是0基,1月对应0,12月对应11):

const [calanderDate, setCalanderDate] = useState(new DateObject({ year: 2024, month: 0 })) // 以2024年1月作为起始展示月份

2. 通过minDate和maxDate限定月份范围

给Calendar组件添加minDate和maxDate属性,明确允许的月份边界,配合numberOfMonths控制显示的月份总数:

<Calendar
    disableMonthPicker
    disableYearPicker
    buttons={false}
    numberOfMonths={15}
    onChange={(e) => setCalanderDate(e)}
    value={calanderDate}
    fullscreen={false}
    multiple
    // 设置允许的最早月份
    minDate={new DateObject({ year: 2024, month: 0 })}
    // 设置允许的最晚月份(这里是起始月+14个月,对应15个月的展示范围)
    maxDate={new DateObject({ year: 2025, month: 2 })}
/>

补充说明

  • 若仅需要让日历默认从指定月份开始展示,无需限制可选日期,只需修改useState的初始DateObject即可,minDate和maxDate可省略。
  • DateObject的参数支持year、month、day,按需设置即可,未指定的参数会默认取当前时间对应值。

内容的提问来源于stack exchange,提问作者deep shah

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.15 19:20:28