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

Question

我正在使用 antd DatePicker 来确定日期范围。

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

此外，当我单击月份时，我需要带有年份的完整月份名称，例如 2020 年 1 月，顶部是 2020 年 2 月 - 而不是年份。

还在月份部分，它显示 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 header 的其他部分，我认为它没有公开任何方法来完成您想要的。

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