Search code examples
cssreact-dates

add raduis in selected dates for react-dates (airBnB)

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

Solution

  • 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%;
}