需要在 Antd Datepicker 中编辑 Moment 以显示月份的全名

Question

我正在使用 Antd 的 DatePicker 组件，我正在尝试编辑负责处理月份名称的 Moment 函数。

到目前为止，我的组件显示缩短的名称，但我正在尝试将其更改为 MMMM 格式，以便显示月份的全名。

有谁知道如何做到这一点以及在组件级别是否可行？

My Component

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { DatePicker, Row, Col } from "antd";

function onChange(value, dateString) {
  console.log("Selected Time: ", value);
  console.log("Formatted Selected Time: ", dateString);
}

function onOk(value) {
  console.log("onOk: ", value);
}

ReactDOM.render(
  <div>
    <Row>
      <Col span={8}>
        <DatePicker
          open
          className="my-class"
          onChange={onChange}
          onOk={onOk}
          format="MMMM"
        />
      </Col>
      <Col span={2} offset={6}>
        <input value={null} />
      </Col>
    </Row>
  </div>,
  document.getElementById("container")
);

Answer 1

你不能，DatePicker format 属性是指格式化选择器占位符，而不是内部下拉标题。

// Formats the date placeholder
<DatePicker onChange={onChange} onOk={onOk} format={'YYYY-MMMM-DD'} />

最接近的解决方案是实现您的选择器并根据需要呈现 Calendar 标头。

从official example for customizing Calendar header，您可以更改月份显示：

// From
months.push(localeData.monthsShort(current));
// To
months.push(localeData.months(current))

查看examples。