Javascript 需要为日历创建自定义导航标题

我有一个Antd日历，作为一个更大的React项目的一部分使用。此组件将从API响应加载数据，并将一组日期和时间映射到日历上的日期/时间选择，如2017年7月12日和

PM

开箱即用，用于选择月份和年份的默认标题样式如下所示

我正在尝试将其更改为包含一个自定义标题，该标题仅列出月份名称和年份（例如：

2019年7月

），以及用于在月份之间导航的左右V形符号

我已经包括了雪佛龙，但是当涉及到实现导航功能以及如何呈现当前月份和年份的名称时，我完全不知所措

我在这里包括了一个代码沙盒来显示我当前的进展

我的日历组件

import React from "react";
import { Calendar, Select, Radio, Col, Row } from "antd";
import { FaChevronRight, FaChevronLeft } from "react-icons/fa";
import styled from "styled-components";

const { Group, Button } = Radio;

function onPanelChange(value, mode) {
  console.log(value, mode);
}

const StylingCalendar = props => (
  <div style={{ width: 300, border: "1px solid #d9d9d9", borderRadius: 4 }}>
    <Calendar
      fullscreen={false}
      headerRender={({ value, type, onChange, onTypeChange }) => {
        const start = 0;
        const end = 12;
        const monthOptions = [];

        const current = value.clone();
        const localeData = value.localeData();
        const months = [];
        for (let i = 0; i < 12; i++) {
          current.month(i);
          months.push(localeData.monthsShort(current));
        }

        for (let index = start; index < end; index++) {
          monthOptions.push(
            <Select.Option className="month-item" key={`${index}`}>
              {months[index]}
            </Select.Option>
          );
        }
        const month = value.month();

        const year = value.year();
        const options = [];
        for (let i = year - 10; i < year + 10; i += 1) {
          options.push(
            <Select.Option key={i} value={i} className="year-item">
              {i}
            </Select.Option>
          );
        }
        return (
          <div style={{ padding: 10 }}>
            <div style={{ marginBottom: "10px" }}>{monthOptions.name}</div>
            <Row type="flex" justify="space-between">
              {/* <Col>
                <Group
                  size="small"
                  onChange={e => onTypeChange(e.target.value)}
                  value={type}
                >
                  <Button value="month">Month</Button>
                  <Button value="year">Year</Button>
                </Group>
              </Col> */}
              {/* <Col>
                <Select
                  size="small"
                  dropdownMatchSelectWidth={false}
                  className="my-year-select"
                  onChange={newYear => {
                    const now = value.clone().year(newYear);
                    onChange(now);
                  }}
                  value={String(year)}
                >
                  {options}
                </Select>
              </Col> */}
              <Col span={8}>
                <LeftArrow onClick={null} />
              </Col>
              <Col span={8}>
                {/* <FaChevronLeft /> */}
                <Select
                  size="small"
                  dropdownMatchSelectWidth={false}
                  value={String(month)}
                  onChange={selectedMonth => {
                    const newValue = value.clone();
                    newValue.month(parseInt(selectedMonth, 10));
                    onChange(newValue);
                  }}
                >
                  {monthOptions}
                </Select>
              </Col>
              <Col span={8}>
                <RightArrow onClick={null} />
              </Col>
            </Row>
          </div>
        );
      }}
      onPanelChange={onPanelChange}
    />
  </div>
);

const RightArrow = styled(FaChevronRight)`
  cursor: pointer;
`;

const LeftArrow = styled(FaChevronLeft)`
  cursor: pointer;
`;

export default StylingCalendar;

从“React”导入React；
从“antd”导入{日历、选择、单选、列、行}；
从“react icons/fa”导入{FaChevronRight，FaChevronLeft}；
从“样式化组件”导入样式化；
const{Group，Button}=收音机；
函数onPanelChange（值、模式）{
console.log（值、模式）；
}
常量样式日历=道具=>(
{
常数开始=0；
const-end=12；
常数monthOptions=[]；
const current=value.clone（）；
const localeData=value.localeData（）；
常量月数=[]；
for（设i=0；i<12；i++）{
本月（i）；
月推（本地数据月推（当前））；
}
for（让index=start；index
月
年
*/}
{/* 
{
const now=value.clone（）.year（新年）；
onChange（现在）；
}}
值={String（year）}
>
{options}
*/}
{/*  */}
{
const newValue=value.clone（）；
newValue.month（parseInt（selectedMonth，10））；
onChange（newValue）；
}}
>
{monthOptions}
);
}}
onPanelChange={onPanelChange}
/>
);
const RightArrow=样式化（FaChevronRight）`
光标：指针；
`;
const LeftArrow=styled（FaChevronLeft）`
光标：指针；
`;
导出默认样式日历；

尝试使用

showTime

功能，按

select time

检查

此外，如果您使用

open

属性，您将获得您试图实现的组件：

<DatePicker open showTime placeholder="Select Time" />

---

我也遇到了同样的问题。如果您使用日历组件的onChange道具，这将非常简单。 更改月份的按钮代码如下：

`<Button
   onClick={() => {
      const newValue = moment(value).subtract(1, 'M')
      onChange(newValue)
   }
>
{'last month'}
</Button>`

`{
常数newValue=力矩（值）。减去（1，'M'）
onChange（newValue）
}
>
{‘上个月}
`

您的组件是无状态的，您打算如何更改当前月份的状态？尝试添加一个当前时刻状态。此外，您太努力了，这个组件的用途是什么？你想选个约会吗？或者只显示日历？第1部分是显示日历，第2部分是显示所选日期以及下拉菜单，以选择日历右侧的

AM、PM、ANY

时间。您是否正在尝试安排日期？请尝试在问题中添加您的组件用途，因为我认为您做得过火了，我可以向您展示一个简单的解决方法。是的，本质上，我试图安排一个日期和时间，但整个组件将从API调用加载一个JSON响应，并附加一组3次：

AM，PM，任何

，每个都有自己的唯一ID，用于响应中的日期集。组件的用途比我的问题要深刻得多我只是想先弄清楚日历的初始样式和导航这很接近，但现在我必须找到一种方法，将打开的日历显示在左侧，将日期选择器输入显示在右侧，作为一个单独的组件