Is there any other way to show the month,year except dropdown in react-datepicker?

Question

I am using react-datepicker but for some reason, we don't want to show the month and year in the dropdown.

<DatePicker
    selected={this.state.startDate}
    onChange={this.handleChange}
    peekNextMonth
    showMonthDropdown
    showYearDropdown
    dropdownMode="select"
/>

Is there any other way to show the month and year?

Answer 1

There is an inline version for react-datepicker

<DatePicker
    inline
    selected={this.state.startDate}
    onChange={this.handleChange}
/>

ref: https://hacker0x01.github.io/react-datepicker/ Scroll to bottom on this page to see the example of the inline version

Answer 2

showYearDropdown works only if you set minDate prop with date object. Ex minDate={new Date()}. If you pass string to minDate then year dropdown will be empty.

Avoid using minDate={parseISO(new Date())}, where parseISO returns date string.

Answer 3

There are two modes "select" and "scroll".

<DatePicker
    selected={this.state.startDate}
    onChange={this.handleChange}
    peekNextMonth
    showMonthDropdown
    showYearDropdown
    dropdownMode= "scroll"
/>

Answer 4

To show only Month and Year Dropdown, try this.

<DatePicker
  dateFormat="MMMM yyyy"
  showMonthYearPicker
  selected={this.state.startDate}
  onChange={this.handleChange}
/>

ref: link