Question 184259 in CSS Question posted in
Some basic documentation can be found here.

react-datepicker css selected range

I am implementing: react-datepicker: https://www.npmjs.com/package/react-datepicker
My expected: 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: 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-datepropblem

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

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

  2. 0

    If you don’t want the background color on start and end dates you have to overwrite the default CSS which is getting applied by the react date picker library
    You can try using this CSS in your global CSS file

    .react-datepicker__day--range-end, .react-datepicker__day--range-start {
        border-radius: 50% !important;
        background-color: transparent !important;
        color: #e3f762 !important;
        border: 1px solid #000;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search