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

bqjvbblv 于 2022-10-15 发布在 React

关注(0)|答案(2)|浏览(255)

bounty 4天后到期。这个问题的答案有资格获得+50的声誉奖励。li97希望引起更多关注这个问题。

我使用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>
  );
}

reactjs

来源：https://stackoverflow.com/questions/74016221/custom-range-css-and-full-names-in-month-selector-antd-datepicker

2条答案

按热度按时间

yyhrrdl81#

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

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

赞(0）回复(0）举报 2022-10-15

mwg9r5ms2#

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

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

对于年份单元格，还没有那个道具，但可能会在未来添加它。
作为替代，您可以使用panelRender道具进行自定义面板渲染，但如果您问我，这对您的情况来说太过分了。

赞(0）回复(0）举报 2022-10-15

我来回答

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

2条答案

相关问题

热门标签

最新问答