Custom range css and full names in month selector: Antd datepicker

Question

I am using antd DatePicker for date range purposes.

How can I style the selected range css to have custom css for the start and end of the range, and for the in between selected dates?

Also when I click on the month, I need the full months name with year like January 2020, February 2020 on top - rather that the year.

Also in the month section it shows Jan, Feb, Mar as months abbreviation. Likewise I need that to be full month names like January, February, etc.

Sandbox: https://codesandbox.io/s/black-breeze-6gmz85?file=/src/styles.css

import React from "react";
import "./styles.css";
import { DatePicker } from "antd";
import "antd/dist/antd.css";
import moment from "moment";

const { RangePicker } = DatePicker;

export default function App() {
  return (
    <div className="App">
      <br />
      <RangePicker />
    </div>
  );
}

Answer 1

You can style the start, selected range, and end quite easily using the following classes.

e.g.

/* before */
.ant-picker-cell-in-view.ant-picker-cell-range-start .ant-picker-cell-inner {
  background: green;
}


/* after */
.ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner {
  background: purple;
}


/* range */
.ant-picker-cell-in-view.ant-picker-cell-in-range::before {
  background: red;
}

Gives the following...

Unfortunately for the other bits around customising the RangePicker header, I don't believe it exposes any methods to accomplish what you want.

See the official documentation: https://ant.design/components/date-picker/#RangePicker