Adding ClassName To Refrence Element (input)

  • Default input className : rmdp-input
  • Default button className : rmdp-button

Note that when you enter a new className, the default className is automatically removed.

<DatePicker
  inputClass="custom-input"
/>

style.css :

.custom-input {
  border-radius: 15px;
  border: 1px #0c8af8 solid;
  padding: 4px 12px;
  background-color: white;
  height: 22px;
  box-shadow: 0 0 2px #0074d9;
}

.custom-input:focus {
  outline: none;
  border: 1px solid #0c8af8;
  box-shadow: 0 0 10px 2px #0074d9;
}

Adding Style To Refrence Element (input)

<DatePicker
  style={{
    backgroundColor: "aliceblue",
    height: "24px",
    borderRadius: "8px",
    fontSize: "14px",
    padding: "3px 10px"
  }}
/>

Adding ClassName To Popper Element (calendar)

Remember that any value you enter as className, will be entered in the arrow at the same time.

since the calendar class is .rmdp-wrapper, use the .rmdp-wrapper.YOUR_CLASSNAME selector in CSS file so that the class you apply to the calendar does not interfere with the arrow.

<DatePicker
  className="custom-calendar"
/>

style.css :

rmdp stands for react multi date picker.

ep stands for element popper. 

.custom-calendar.rmdp-wrapper,
.rmdp-container .custom-calendar.ep-arrow::after {
  background-color: bisque;
}

.rmdp-container .custom-calendar.ep-arrow[direction="bottom"] {
  border-top: 1px solid bisque;
}

.rmdp-container .custom-calendar.ep-arrow[direction="top"] {
  border-bottom: 1px solid bisque;
}

Adding Style To Arrow

<DatePicker
  arrowStyle={{
    backgroundColor: "black"
  }}
/>

Adding ClassName To Arrow

<DatePicker
  arrowClassName="custom-arrow"
/>

style.css :

.rmdp-container .ep-arrow.custom-arrow::after {
  background-color: blue;
}

Adding Style To DatePicker Container

Because the display value of the DatePicker Container is inline-block, in case you want to change the width of the input, it is necessary to change the width of the datepicker container as well.

<DatePicker
  style={{
    width: "100%",
    boxSizing: "border-box",
    height: "26px"
  }}
  containerStyle={{
    width: "100%"
  }}
  calendarPosition="bottom-center"
/>

Adding ClassName To DatePicker Container

<DatePicker
  containerClassName="custom-container"
  calendarPosition="bottom-center"
/>

style.css :

.custom-container {
  width: 100%;
}

.custom-container .rmdp-input {
  width: 100%;
  box-sizing: border-box;
  height: 26px;
}