javascriptreactjsdatepickerreact-datepicker

How to hide the react-datepicker header?


I'm trying to hide the header in the react-datepicker. And from what I read it should just be the tag hideHeader. but it does not seem to be working for me.

according to this, the feature was added in 2017 https://github.com/Hacker0x01/react-datepicker/pull/1026

But when I read their documentation hideHeader is not listed https://github.com/Hacker0x01/react-datepicker/blob/main/docs/datepicker.md

Here is my code:

<DatePicker  ...
             showMonthDropdown={true}
             showYearDropdown={true}
             hideHeader />

Did they remove this feature? or am I adding it in wrong? I also tried hideHeader={true} but it does not seem to work.


Solution

  • Deep in the issues, I traced one down where they were discussing hiding the header. Someone recommended this (from here: https://github.com/Hacker0x01/react-datepicker/issues/1008#issuecomment-804609744):

    <DatePicker
      showMonthDropdown={true}
      showYearDropdown={true}
      dateFormatCalendar=" " />
    

    Note the empty space