react-datepicker remove coloring of same day in other months

Question

If you look at the default implementation of the react-datepicker the day of this month will be highlighted on every month. Is there a way to only highlight/color the day of the current month and not highlight this date in all other months?

If you look at the first image the 6 August is highlighted because it is the current date. But 6 September is also highlighted.

score 14 · Answer 1 · edited Dec 27 '21 at 20:11

14

After I realized this issue is related to the CSS class .react-datepicker__day--keyboard-selected, I did a quick search and found out we can fix this problem by disabling the keyboard navigation (if you don't need the keyboard navigation feature)

<DatePicker 
  selected={startDate} 
  onChange={date => setStartDate(date)}
  disabledKeyboardNavigation
/>

edited Dec 27 '21 at 20:11

Rafael Tavares

5,678
4
32
48

answered Oct 04 '20 at 23:00

lu03566

189
5

Apostolos · Accepted Answer · 2020-08-06T14:00:12.703

9

Create a custom css selector to disable background for all these dates.

.react-datepicker__day.react-datepicker__day--keyboard-selected {
  background: none;
  color: black;
}

Check this sandbox too

https://codesandbox.io/s/react-datepicker-wqs7y

edited Aug 06 '20 at 14:00

answered Aug 06 '20 at 13:51

Apostolos

10,033
5
24
39

I don't seem to get it to work. My datepicker has a custom className "DatePicker". Maybe this is the problem? – Stephen Aug 06 '20 at 13:56
hmm can you try with `!important` just in case? I have a codesandbox which is working – Apostolos Aug 06 '20 at 13:58
i updated the selector in order not to use `!important`. – Apostolos Aug 06 '20 at 14:00
1

Ok I got it to work. I added the code to the css of the component that contains the Datepicker. When I added the code to the css file of index.js it worked. Thanks a lot! – Stephen Aug 06 '20 at 14:15
Big Up! Thx to you – G Clovs May 26 '21 at 15:46
1

This solution saved lot of time. Thanks a lot! – Vishwa Jan 31 '23 at 14:08

react-datepicker remove coloring of same day in other months

2 Answers2