react-datepicker css selected range

Question

I am implementing: react-datepicker: https://www.npmjs.com/package/react-datepicker My expected:

But, when I change start-date and end-date, I changed border-radius for start-date and end-date, and this is my result:

Link to try: https://codesandbox.io/s/crazy-snow-sm2z62?file=/src/App.js

My problem is: doesn't have background around start-date and end-date

Answer 1

Anyway, I fixed my problem by added ::before and ::after to start-date and end-date.

.react-datepicker__day--range-end::before,
.react-datepicker__day--range-start::before {
  border-radius: 50% !important;
  width: 100%;
  content: "";
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1 !important;
  background-color: #222 !important;
}

.react-datepicker__day--range-start::after {
  width: 50%;
  content: "";
  height: 100%;
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 0 !important;
  background-color: #e3f762 !important;
}

.react-datepicker__day--range-end::after {
  width: 50%;
  content: "";
  height: 100%;
  position: absolute;
  right: 50%;
  top: 0;
  z-index: 0 !important;
  background-color: #e3f762 !important;
}

Finally, I custom DatePicker day by added renderDayContents props to custom date display:

<DatePicker
    onChange={onChange}
    startDate={startDate}
    endDate={endDate}
    selectsRange
    selectsDisabledDaysInRange
    renderDayContents={(day) => <span>{day}</span>}
    inline
/>

And style for day content:

.react-datepicker__day--range-end span,
.react-datepicker__day--range-start span {
  position: absolute;
  z-index: 5;
  color: #e3f762 !important;
}