reactjs - React-nice-calendar is missing a year

Question

I am using react-nice-calender in my application. The problem is that the year is missing from the calendar as you see in the image. How can I fix that!

The code :

 const [date, setDate] = useState();

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

question from:https://stackoverflow.com/questions/65937053/react-nice-calendar-is-missing-a-year

Answer 1

If you want to show the year you have to format the date with date-fns dependencie so I take the example from: 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>
  )
}

Here you have a codesandbox: https://codesandbox.io/s/datepicker-default-example-0kn7i

If you are in the current year it wont appear:

2021(current year):

2023: