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?

@MayankShukla yes I want but in another format not in the dropdown. — Gorakh Nath, Sep 05 '17 at 09:47
@HanaAlaydrus date-picker where option should be there to select the month and year but should not be in dropdown. — Gorakh Nath, Sep 05 '17 at 09:59

score 7 · Answer 1 · answered Apr 29 '20 at 04:55

7

To show only Month and Year Dropdown, try this.

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

ref: link

answered Apr 29 '20 at 04:55

MDK

131
2
4

score 1 · Answer 2 · answered Sep 05 '17 at 10:03

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

answered Sep 05 '17 at 10:03

Hana Alaydrus

2,225
16
19

above code won't give the multiple options to the user for selecting month and year. – Gorakh Nath Sep 05 '17 at 10:06
@jack123 sorry I don't really understand what you looking for, any picture or drawing? so I can undestand more. – Hana Alaydrus Sep 05 '17 at 10:13
these two property showMonthDropdow and showYearDropdown use to show the month and year, but if you will use it you will see that option to select month and year are coming in the dropdown.But I don't to show the option in dropdown. – Gorakh Nath Sep 05 '17 at 10:18
1

I dont see it possible in react-datepicker, but there are other date picker library http://clauderic.github.io/react-infinite-calendar/#/customization/select-year-first?_k=eht357 but you might need some tweak to make it looks like what you want – Hana Alaydrus Sep 05 '17 at 11:02

Raubin · Answer 3 · 2019-12-26T07:21:00.417

1

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

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

edited Dec 26 '19 at 07:21

answered Dec 26 '19 at 07:15

Raubin

11
2

score 0 · Answer 4 · answered Apr 16 '21 at 07:00

0

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.

answered Apr 16 '21 at 07:00

Bhimashankar Sutar

119
1
8

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

4 Answers4