React DatePicker如何设置默认年份？date/initialDate属性无效

针对你遇到的问题，结合你使用的LentoFormikDatePicker封装组件，提供以下几种解决方案：

1. 尝试透传原生react-datepicker的initialDate属性 #

原生react-datepicker中，initialDate是控制日历打开时默认显示日期的属性。如果LentoFormikDatePicker支持透传原生组件的props，直接替换你代码中的date为initialDate即可：

const defaultYear = new Date("1990-01-01")

<LentoFormikDatePicker
      name='date_of_birth'
      label='Date of birth'
      value={values.date_of_birth}
      setFieldValue={setFieldValue}
      maxDate={addYearsToDate(-18)}
      minDate={addYearsToDate(-100)}
      initialDate={defaultYear} // 替换原date属性
  />

2. 通过日历打开事件手动设置年份 #

如果封装组件不支持透传initialDate，可以借助onCalendarOpen事件结合ref手动控制年份：

import { useRef } from 'react';

const datePickerRef = useRef(null);

const handleCalendarOpen = () => {
  // 调用原生datepicker实例的setYear方法定位到1990年
  if (datePickerRef.current) {
    datePickerRef.current.setYear(1990);
  }
};

<LentoFormikDatePicker
      name='date_of_birth'
      label='Date of birth'
      value={values.date_of_birth}
      setFieldValue={setFieldValue}
      maxDate={addYearsToDate(-18)}
      minDate={addYearsToDate(-100)}
      innerRef={datePickerRef} // 传递ref到原生组件
      onCalendarOpen={handleCalendarOpen} // 监听日历打开事件
  />

3. 确认封装组件的自定义配置 #

由于LentoFormikDatePicker是基于Formik和react-datepicker的封装组件，建议检查其官方文档，确认是否有专属的属性用于设置日历初始显示的年份，部分封装组件会对原生props做重命名或自定义处理。

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