Is there any way to change the month dropdown on react-datepicker to show number instead of the name itself?

Question

So I have here

 <DatePicker
   selected={value?.toDate()}
   onChange={(date) => this.handleMonthChange(date)}
   inline
   showMonthYearPicker
   dateFormat={this.props.formatString}
   />

I want to achieve that instead of Jan. It will display 01, and so on for other months. Thank you

You're probably looking for this reactdatepicker.com/#example-custom-month — 3limin4t0r
– 3limin4t0r, Commented Jul 7, 2023 at 8:10
Actually, I'm using it now, adding showMonthYearPicker on Datepicker, but want I want to achieve is the dropdown menu will show numbers instead of Jan, Feb, Mar, Apr, etc... — Rey
– Rey, Commented Jul 7, 2023 at 8:16
Ooh, sorry, I didn't see that part. My bad for not double-checking. Now I get it. Thanks, mate! such a help — Rey
– Rey, Commented Jul 7, 2023 at 8:31

Stratis Dermanoutsos · Accepted Answer · 2023-07-07 08:25:56Z

5

You will have to define a renderMonthContent method and pass it as a prop to your DatePicker.

As the month variable is the month's index (and as such, January is 0 instead of 1) we increment by 1.

Also, we add .toString().padStart(2, 0) to achieve the always-2-digit presentation you want.

const Component = () => {
  const renderMonthContent = (month, shortMonth, longMonth) => {
    return <span>{(month+1).toString().padStart(2, 0)}</span>;
  };
  ...

  return (
    <DatePicker
       selected={value?.toDate()}
       onChange={(date) => this.handleMonthChange(date)}
       inline
       showMonthYearPicker
       dateFormat={this.props.formatString}
       renderMonthContent={renderMonthContent}
       />
    ...
  );
};

Results:

answered Jul 7, 2023 at 8:25

Stratis Dermanoutsos

7812 gold badges10 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

3limin4t0r Over a year ago

It's a good idea to lift renderMonthContent out of Component if it does not depend on any states/props/hooks. Currently renderMonthContent is re-defined every time Component renders, which doesn't seem necessary. Other than that, good answer.

Stratis Dermanoutsos Over a year ago

@3limin4t0r is right on that. I didn't consider it while answering.

Collectives™ on Stack Overflow

Is there any way to change the month dropdown on react-datepicker to show number instead of the name itself?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related