CODEWITHSUNDEEP
javascriptreactjsmomentjsantd
Josh
Josh

Reputation: 1235

Need to edit Moment in Antd Datepicker to display full name of month

I'm using the DatePicker component from Antd and I'm trying to edit the Moment function responsible for handling the month name.

As of now my component displays the shortened name, but I'm trying to change it to MMMM format so that the full name of the month displays.

Does anyone know how to do this and if this is possible at the component level?

Edit goofy-currying-csgtr

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

Upvotes: 2

Views: 4276

Answers (1)

Dennis Vash
Dennis Vash

Reputation: 53874

You can't, DatePicker format property refers to formatting the picker placeholder, not the inner dropdown title.

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

enter image description here

The closest solution is to implement your picker and render Calendar header as you like.

From the official example for customizing Calendar header, you can change the month presentation:

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

Check out the examples.

Edit Q-56958116-DatePickerMonthFormat

Upvotes: 5

Related Questions