Ant Design | 日历组件Calendar自定义头部利用Calender自定义一个头部，中间显示年月，左右点击切

利用Calender自定义一个头部，中间显示年月，左右点击切换月份。

一、如图

（一）设置日期初始值

state = {
    value: moment(),
  };

（二）组件引用

<Calendar
          value={value}
          onPanelChange={this._onPanelChange}
          headerRender={({ value, onChange }) =>
            this._headerRender(value, onChange)
          }
        />

（三）headerRender 自定义头部方法（实现时间切换）

  _headerRender = (value, onChange) => {
    let currentYear = value.format('YYYY年');
    let currentMonth = value.format('M月');
    const next = () => {
      let newMonth = moment(value).add(1, 'months');
      onChange(newMonth);
    };
    const prev = () => {
      let prevMonth = moment(value).subtract(1, 'months');
      onChange(prevMonth);
    };

    return (
      <div
        style={{
          display: 'flex',
          flexDirection: 'row',
          alignItem: 'cnter',
          justifyContent: 'center',
        }}
      >
        <Button
          size="small"
          type="text"
          icon={<LeftOutlined />}
          onClick={() => prev()}
        />
        <div className="title-text">
          <span>{currentYear} </span>
          <span>{currentMonth}</span>
        </div>
        <Button
          size="small"
          type="text"
          icon={<RightOutlined />}
          onClick={() => next()}
        />
      </div>
    );
  };

（四）onPanelChange 日期面板变化（更改初始日期值）

  // 日期面板改变
  _onPanelChange = (value) => {
    this.setState({ value });
  };

二、完整栗子代码如下：

import React from 'react';
import ReactDOM from 'react-dom';
import { Calendar, Button } from 'antd';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import moment from 'moment';

class App extends React.Component {
  state = {
    value: moment(),
  };
  render() {
    const { value } = this.state;
    return (
      <>
        <Calendar
          value={value}
          onPanelChange={this._onPanelChange}
          headerRender={({ value, onChange }) =>
            this._headerRender(value, onChange)
          }
        />
      </>
    );
  }
  // 日期面板改变
  _onPanelChange = (value) => {
    this.setState({ value });
  };

  // 头部时间切换
  _headerRender = (value, onChange) => {
    let currentYear = value.format('YYYY年');
    let currentMonth = value.format('M月');
    const next = () => {
      let newMonth = moment(value).add(1, 'months');
      onChange(newMonth);
    };
    const prev = () => {
      let prevMonth = moment(value).subtract(1, 'months');
      onChange(prevMonth);
    };

    return (
      <div
        style={{
          display: 'flex',
          flexDirection: 'row',
          alignItem: 'cnter',
          justifyContent: 'center',
        }}
      >
        <Button
          size="small"
          type="text"
          icon={<LeftOutlined />}
          onClick={() => prev()}
        />
        <div>
          <span>{currentYear} </span>
          <span>{currentMonth}</span>
        </div>
        <Button
          size="small"
          type="text"
          icon={<RightOutlined />}
          onClick={() => next()}
        />
      </div>
    );
  };
}

ReactDOM.render(<App />, document.getElementById('container'));