search

hypeserver / react-date-range

A React component for choosing dates and date ranges.
MIT License
2.57k stars 658 forks source link

Change selected date color. #591

Open geeorgipehlianov1 opened 1 year ago

geeorgipehlianov1 commented 1 year ago

Subject of the issue

Hello I am trying to change the color of the dates when they are selected to black, but I can't find a way to do this. Can someone help.

Devamchaudhari commented 1 year ago

@geeorgipehlianov1 Add this css into your component css file. .rdrCalendarWrapper { //calendar modal width: 100%; .rdrDateDisplayWrapper { border-radius: 10px; background-color: #212529; } .rdrMonthAndYearPickers { font-family: 'Outfit-medium'; font-size: 14px; } .rdrMonth { width: 100%; .rdrWeekDays { .rdrWeekDay { font-family: 'Outfit-medium'; font-size: 14px; } } } .rdrDayNumber { font-family: 'Outfit-medium'; font-size: 14px; color: #081d34; font-weight: 600; } .rdrDay { .rdrInRange ~ .rdrDayNumber span { color: #081d34; } } .rdrDayToday .rdrDayNumber span { &::after { background: #081d34; } } .rdrStartEdge, //this will change selected date styling of start date and end date .rdrEndEdge { background-color: #081d34; color: #081d34; } }