react-datepicker如何设置自定义初始日期解决无效日期报错

触发invalid time/date error是两个写法问题导致的：

• 代码中useState(2022-06-08)未给日期值加引号，JS会把这段内容识别为减法算术表达式，计算结果为数字2008，完全不符合日期参数的格式要求。
• react-datepicker组件的selected属性仅接收标准JavaScript Date实例，就算你给2022-06-08补上引号写成字符串格式直接传入，组件也无法识别，同样会抛出日期无效错误。

把接口返回的YYYY-MM-DD格式字符串转换为标准Date对象，再传给组件作为初始值即可，基础实现代码如下：

const Datepicker = ({ date }: any) => {
  // date为接口返回的"2022-06-08"格式字符串，转为Date实例后再作为初始值
  const [data, setData] = useState<Date | null>(date ? new Date(date) : null)

  return <DatePicker selected={data} onChange={(e: Date) => setData(e)} />
}

如果需要兼容Safari浏览器（Safari对YYYY-MM-DD格式的字符串日期解析存在兼容问题），可以使用手动拆分字段的方式生成Date实例，兼容性更好：

// 通用日期转换方法，兼容所有主流浏览器
const parseStringToDate = (dateStr: string) => {
  if (!dateStr) return null
  const [year, month, day] = dateStr.split('-').map(Number)
  // 注意Date构造函数的月份参数从0开始计数，需要对传入的月份值减1
  return new Date(year, month - 1, day)
}

const Datepicker = ({ date }: any) => {
  const [data, setData] = useState<Date | null>(parseStringToDate(date))

  return <DatePicker selected={data} onChange={(e: Date) => setData(e)} />
}

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