react-dates中DayPickerSingleDateController的initialVisibleMonth设置疑问

用户代码如下：

<DayPickerSingleDateController
  numberOfMonths={1}
  keepOpenOnDateSelect={true}
  dayPickerNavigationInlineStyles={{ color: 'red' }}
  onDateChange={handleSinglePickerDateChange}
  focused={false}            
  date={moment(clickedDate)}
  onFocusChange={(focusedInput) => {
    console.log('focus change of DayPickerSingleDateController');
  }}
  initialVisibleMonth={() => moment(new Date('01-08-2023'))}
  isDayBlocked={getBlockedDay}
  isDayHighlighted={getHighlightedDay}
/>

尝试将日历初始可见月份设置为9月，但代码未达到预期效果，询问是否存在语法错误或其他问题。

核心问题与解决方法 #

1. 日期格式解析歧义
   new Date('01-08-2023')会被JavaScript默认解析为2023年1月8日（遵循MM-DD-YYYY格式规则），完全不符合设置9月的需求。

2. JavaScript月份索引规则
   JavaScript的Date对象中月份是0索引的：0对应1月，1对应2月……8对应9月，直接指定数字时要注意减1。

3. moment的正确用法
   使用moment处理日期时，建议用明确方式避免解析歧义：

• 数组格式：moment([2023, 8, 1])（对应2023年9月1日）
• 指定格式的字符串：moment('2023-09-01', 'YYYY-MM-DD')

4. 组件逻辑优先级
   如果date属性对应的clickedDate不在9月范围内，且组件设置focused={false}，日历可能会自动跳转到date所在月份，覆盖initialVisibleMonth的设置。若要强制显示9月，需确保clickedDate也在9月，或调整聚焦状态逻辑。

修正后的代码示例 #

<DayPickerSingleDateController
  numberOfMonths={1}
  keepOpenOnDateSelect={true}
  dayPickerNavigationInlineStyles={{ color: 'red' }}
  onDateChange={handleSinglePickerDateChange}
  focused={false}            
  date={moment(clickedDate)} // 确保clickedDate在9月，或按需调整
  onFocusChange={(focusedInput) => {
    console.log('focus change of DayPickerSingleDateController');
  }}
  initialVisibleMonth={() => moment([2023, 8, 1])} // 准确设置为2023年9月
  isDayBlocked={getBlockedDay}
  isDayHighlighted={getHighlightedDay}
/>

内容的提问来源于stack exchange，提问作者Mohammad Noushad Siddiqui