CODEWITHSUNDEEP
javascriptcssreactjsantd
user16860065
user16860065

Reputation:

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

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

Current Range Styling Current Range Picker Behavior

Upvotes: 2

Views: 1637

Answers (2)

Fraser
Fraser

Reputation: 17039

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...

custom styling of calendar

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

Upvotes: 4

Zoran
Zoran

Reputation: 27

For month picker you can add this as a prop (it will show full months name on month picker):

<RangePicker monthCellRender={(date) => date.format("MMMM")} />

For year cell there isn't that prop yet, but maybe it will be added in future.

As alternative you could use panelRender prop for custom panel render but that is overkill for your case if you ask me.

Upvotes: -1

Related Questions