月份选择器中的自定义范围 css 和全名：Antd datepicker

Question

我将 antd DatePicker 用于日期范围。

如何设置所选范围 css 的样式，以便为范围的开始和结束以及所选日期之间的时间设置自定义 css？

此外，当我单击月份时，我需要完整的月份名称，上面有 January 2020、February 2020 之类的年份——而不是年份。

同样在月份部分，它显示Jan、Feb、Mar 作为月份的缩写。同样，我需要它是完整的月份名称，例如 January、February 等。

沙盒：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

您可以使用以下类轻松设置开始、选定范围和结束的样式。

例如

/* 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;
}

给出以下...

不幸的是，对于自定义 RangePicker 标头的其他方面，我认为它不会公开任何方法来完成您想要的。

见官方文档：https://ant.design/components/date-picker/#RangePicker

Answer 2

对于月份选择器，您可以将其添加为道具（它将在月份选择器上显示完整的月份名称）：

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

对于 year cell 还没有那个道具，但将来可能会添加。

作为替代方案，您可以使用 panelRender 属性进行自定义面板渲染，但如果您问我，这对您的情况来说太过分了。