React-nice-calendar 缺少一年

问题描述

我在我的应用程序中使用 react-nice-calender。 问题是日历中缺少年份，如您在图像中看到的那样。 我该如何解决！

代码：

 const [date,setDate] = useState();

   <DatePickerCalendar
          date={date}
          onDateChange={setDate}
          locale={enGB}
     />

解决方法

如果要显示年份，则必须使用 date-fns 依赖项格式化日期，因此我以以下示例为例： https://reactnicedates.hernansartorio.com/

import React,{ useState } from 'react'
import { format } from 'date-fns'
import { enGB } from 'date-fns/locale'
import { DatePickerCalendar } from 'react-nice-dates'
import 'react-nice-dates/build/style.css'
function DatePickerCalendarExample() {
  const [date,setDate] = useState()
  return (
    <div>
      <p>
        Selected date: {date ? format(date,'dd MMM yyyy',{ locale: enGB }) : 'none'}.
      </p>
      <DatePickerCalendar date={date} onDateChange={setDate} locale={enGB} />
    </div>
  )
}

这里有一个代码沙盒： https://codesandbox.io/s/datepicker-default-example-0kn7i

如果您在当前年份，则不会出现：

2021（当年）：

2023 年：