CODEWITHSUNDEEP
reactjsdatepickerreact-datepicker
Stephen
Stephen

Reputation: 1183

react-datepicker remove coloring of same day in other months

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

Upvotes: 6

Views: 9905

Answers (2)

lu03566
lu03566

Reputation: 199

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

Upvotes: 15

Apostolos
Apostolos

Reputation: 10463

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

Upvotes: 10

Related Questions