react-datepicker remove coloring of same day in other months

user_3566338 0
Viewed 4953

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.

This Month enter image description here

react-datepicker reactjs datepicker
2 Answers

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
/>
user_143911580

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

user_11210080
Related