CODEWITHSUNDEEP
javascriptcssreactjs
Josh
Josh

Reputation: 1235

Using react datepicker, need to apply different styles for today's date and selected date

I'm using React Datepicker and I need to apply two different styles for the current date and a selected date.

I have a style for the current date and a style for when a user selects a date.

My problem is that neither style takes precedent over the other and when you select the current date both colors just mesh. I'm trying to set it so that when you select the current date the selected date CSS style is applied and the other style is ignored.

Edit blue-bash-32xik

CSS Styles

.myClassname,
.react-datepicker__day--selected {
  background-color: #1648c3 !important;
}

.myClassname,
.react-datepicker__day--today {
  border: 2px solid
    linear-gradient(
      174deg,
      rgba(255, 165, 0, 0.7357317927170868) 32%,
      rgba(249, 239, 170, 1) 100%
    );
  border-radius: 0.3rem;
  background: linear-gradient(
    174deg,
    rgba(255, 165, 0, 0.7357317927170868) 32%,
    rgba(249, 239, 170, 1) 100%
  );
}

Upvotes: 0

Views: 6314

Answers (2)

emre-ozgun
emre-ozgun

Reputation: 762

Expanding on @aquilesb's answer

.react-datepicker__day--keyboard-selected {
  background-color: red !important;
}

This style can also be added for convenience.

Upvotes: 0

aquilesb
aquilesb

Reputation: 2272

The only thing you have o change is in your selected CSS selector. Instead of setting the background-color attribute, set just background attribute. That will override the background: linear-gradient from today selector.

myClassname,
.react-datepicker__day--selected {
  background: #1648c3 !important;
}

Upvotes: 3

Related Questions