Change the background color of calender in react-datepicker

Question

I have to change the background-color of the popper(which is calender) in my react-datepicker to black with white font color when I toggle the theme from default(white) to black.

I have tried using popperClassName, but unable to pass in the font color and background color, although my placeholder has accepted the given values and changed its background when theme is toggled. I have to achieve the styles inline (JSS - css in js/jsx) way only ! though I have tried the styling of placeholder externally.

 <DatePicker
                    selected={startDate}
                    dateFormat={DATE_FORMAT}
                    showMonthDropdown
                    showYearDropdown
                    isClearable
                    todayButton="Today"
                    popperClassName={{ color: fontColor, background }}
                    placeholderText="Click to select date"
                    className={background === '#303030' ? 'placeholderTable' : ''}
                    onChange={(date) => {
                  date = moment(date).format(DATE_FORMAT)
                  if (date === 'Invalid date') {
                    // this means that the user deleted the date
                    // this.setState({ start_date: undefined })
                    this.handleChange({ start_date: undefined, temp_end_date: undefined })
                  } else {
                    // this.setState({ start_date: date })
                    this.handleChange({
                      start_date: date,
                      temp_end_date: moment(date, DATE_FORMAT).add(1, 'year').format(DATE_FORMAT)
                    })
                  }
                }}
                  />

I expect some way to modify the styling for the popper using popperClassName or any other way.

Screen Shot 2019-05-09 at 12.21.47 PM . The calender does not change its background color. — Neelam, May 09 '19 at 16:27
Screen Shot 2019-05-09 at 12.28.04 PM . the placeholder backgroundcolor changes on theme toggle — Neelam, May 09 '19 at 16:29
Also looked up this link https://reactdatepicker.com/#example-17 . But couldnt get anywhere with that . — Neelam, May 09 '19 at 16:39

score 5 · Answer 1 · answered Oct 17 '19 at 12:28

I needed the same thing and this is how I solve it - using css:

.react-datepicker__header {
  text-align: center;
  background-color: #3e82cf;
  border-bottom: 0px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding-top: 8px;
  position: relative;

}

.react-datepicker__today-button {
  background: #3e82cf;
  border-top: 0px;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  padding: 5px 0;
  clear: left;
}

For the calendar area you can use:

.react-datepicker {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  background-color: #a66;
  color: #000;
  border: 0px;
  border-radius: 0;
  display: inline-block;
  position: relative;
}

Just create CSS file and import it. It should work. More styles you can find in react-datepicker.css in dist folder.

Change the background color of calender in react-datepicker

1 Answers1