reactjs - React-nice-calendar 缺少一年

Question

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

编码 ：

 const [date, setDate] = useState();

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

Answer 1

如果你想显示年份，你必须使用 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：