Custom CSS for AntD Date Range Picker

Question

I am trying to colour code the AntD components on my form so that when I am creating a new record the colour scheme is green instead of blue (when Editing an existing record). Standard inputs are working well where I am able to conditionally override the styling for Border and Box shadow, however I am a bit stuck on the DateRange component. I have managed to apply the border and box shadow conditionally:

          <RangePicker
            disabled={editVPMapMode || isVenueCreateMode}
            className={isEditMode ? "" : "createDateRangePicker"}
            showTime={{ format: "HH:mm" }}
            name="StartEndDate"
            format="DD/MM/YYYY HH:mm"
            onChange={(e) => onDateChange(e, "RangePicker")}
          />

Notice the condition in the className property. This class name is referenced in CSS:

.createDateRangePicker.ant-calendar-picker-input.ant-input:hover {
  border-color: #1f9643e5 !important;
  outline: 0 !important;
  -webkit-box-shadow: 0 0 0 2px rgba(49, 139, 54, 0.342) !important;
  box-shadow: 0 0 0 2px rgba(49, 139, 54, 0.342) !important;
}

.createDateRangePicker:hover {
  border-color: #1f9643e5 !important;
}

.createDateRangePicker.ant-picker-focused {
  border-color: #1f9643e5 !important;
  outline: 0 !important;
  -webkit-box-shadow: 0 0 0 2px rgba(49, 139, 54, 0.342) !important;
  box-shadow: 0 0 0 2px rgba(49, 139, 54, 0.342) !important;
}

.createDateRangePicker .ant-picker-active-bar {
  background-color: #1f9643e5 !important;
}

This results in the DateRange component having some of the functionality I want:

Notice how the Input part has a green border based on the condition mentioned above. However, as you can also see the rest of the component has a lot of blue still to change.

When I go to inspect the elements that are sent to the browser I can see that the DropDown calendar section is separated from the main DateRange component:

Also note that my className createDateRangePicker is not passed over to the lower dropdown section.

I have the CSS Classes I want to override:

.ant-picker-cell-in-view.ant-picker-cell-range-start .ant-picker-cell-inner {
  background-color: #27c456 !important;
}

.ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner {
  background-color: #27c456 !important;
}

.ant-picker-cell-in-view.ant-picker-cell-today
  .ant-picker-cell-inner::before {
  border-color: #1f9643e5 !important;
}

.ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single)::before,
.ant-picker-cell-in-view.ant-picker-cell-in-range::before,
.ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single)::before,
.ant-picker-time-panel-column
  > li.ant-picker-time-panel-cell-selected
  .ant-picker-time-panel-cell-inner {
  background: #e6ffe8 !important;
}

.ant-btn-primary {
background-color: #27c456 !important;
border-color: #1f9643e5 !important;
}

To do this:

However I can only do a once-off override and cannot get it to be conditional like I have the other controls above - primarily because the className is not being used there.

I hope this makes sense enough to someone that they can help point me in the right direction to address this.

Answer 1

To customize the CSS of the Ant Design (AntD) Date Range Picker, you can utilize the dropdownClassName property provided by the DatePicker component.

This property allows you to apply a custom CSS class to the dropdown panel of the Date Range Picker, enabling targeted styling.

  dropdownClassName="my-calender" // Applies custom CSS class to the dropdown panel

.my-calender {
  /* Add your custom styles here */
}

Answer 2

Just use this feature , It loads it directly into the div.

Answer 3

Looks like I was missing something simple. There is an antD property I initially missed called dropdownClassName. I added it in as follows:

          <RangePicker
            disabled={editVPMapMode || isVenueCreateMode}
            className={isEditMode ? "" : "createDateRangePicker"}
            dropdownClassName={isEditMode ? "" : "createDateRangePicker"}
            showTime={{ format: "HH:mm" }}
            name="StartEndDate"
            format="DD/MM/YYYY HH:mm"
            onChange={(e) => onDateChange(e, "RangePicker")}
          />

Then updated the second set of CSS above to look for the class supplied:

.createDateRangePicker
  .ant-picker-cell-in-view.ant-picker-cell-range-start
  .ant-picker-cell-inner {
  background-color: #27c456 !important;
}

.createDateRangePicker
  .ant-picker-cell-in-view.ant-picker-cell-range-end
  .ant-picker-cell-inner {
  background-color: #27c456 !important;
}

.createDateRangePicker
  .ant-picker-cell-in-view.ant-picker-cell-today
  .ant-picker-cell-inner::before {
  border-color: #1f9643e5 !important;
}

.createDateRangePicker
  .ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single)::before,
.createDateRangePicker
  .ant-picker-cell-in-view.ant-picker-cell-in-range::before,
.createDateRangePicker
  .ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single)::before,
.createDateRangePicker
  .ant-picker-time-panel-column
  > li.ant-picker-time-panel-cell-selected
  .ant-picker-time-panel-cell-inner {
  background: #e6ffe8 !important;
}

.createDateRangePicker .ant-btn-primary {
  background-color: #1f9643e5 !important;
  border-color: #1f9643e5 !important;
}

And now the colours I need are now conditional based on whether I am in Edit mode:

or Create mode: