0

I'm using react-dates in order to achieve the following date range picker :

expected output

here is what I have done : https://codesandbox.io/s/ecstatic-almeida-3u72o?fontsize=14&hidenavigation=1&theme=dark but I still have a problem to apply the selected style out of border radius of the selected dates (i tried before and ofter also I tried to create a custom content cell in order to apply a background style but it doesn't work) Anyone can help me, please Here is a screenshot of the problem that i'm facing : enter image description here

Taha LAGHZALI
  • 464
  • 2
  • 14

1 Answers1

1

What are you having trouble with exactly?

Making the css rules apply or making the rules to be exactly like the screenshot design?

If it is the second one, I would just do something like:

.CalendarDay__selected {
  border: none;
}

.CalendarDay__selected_start,
.CalendarDay__selected_end {
    border-radius: 50%;
    position: relative;
    z-index: 0;
  
  &:before {
    display: block;
    position: absolute;
    content: '';
    left: 50%;
    right: 0;
    bottom: 0;
    top: 0;
    background: #66e2da;
    z-index: -1;
  }
  
  &:after {
    display: block;
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: #00a699;
    z-index: -1;
    border-radius: 50%;
  }
}

.CalendarDay__selected_span {
  border: none;
}

.CalendarDay__selected_span:last-of-type {
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}

.CalendarDay__selected_span:first-of-type {
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
}
Dharman
  • 30,962
  • 25
  • 85
  • 135
  • is there any way to change color of all dates cell 1.2.3.4.5 to another color at the start I mean all cells should have same color ? –  Apr 17 '22 at 08:10