Reactjs 如何更改大日历顶部的日期格式

我在我的项目中使用了react big Calendar，现在我只使用了day视图，并希望根据我的需要定制日期格式，它目前显示为9月2日星期三，我想要的是2020年9月2日，我没有发现任何道具可以操作，任何帮助都会有很大帮助。我的代码如下所示

import React, { useState, useEffect } from 'react';
import { Calendar, momentLocalizer } from 'react-big-calendar';
import moment from 'moment';
import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop';
import { Box } from './styled';
import 'react-big-calendar/lib/addons/dragAndDrop/styles.css';
import 'react-big-calendar/lib/css/react-big-calendar.css';
import { changeAppointment } from '../api';

export default function Calender(props) {
    const { date } = props;
    const { data } = props;
    const localizer = momentLocalizer(moment);
    const DnDCalendar = withDragAndDrop(Calendar);
    const [events, setEvents] = useState([]);

    useEffect(() => {
        let tempEvents = [];
        data.forEach((element) => {
            const data = {
                title: element.patient.name + ', ' + element.patient.phone,
                id: element.id,
                start: moment.utc(element.datetime).toDate(),
                end: moment.utc(element.datetime).add(30, 'minutes').toDate(),
            };
            tempEvents.push(data);
            setEvents(tempEvents);
        });
    }, [data]);

    const onEventResize = (data) => {
        const { start, end, event } = data;
        const newEvents = [...events];
        newEvents.forEach((existingEvent) => {
            if (existingEvent.id === event.id) {
                existingEvent.start = start;
                existingEvent.end = end;
                const info = {
                    id: event.id,
                    datetime: moment.utc(start).format(),
                };
                changeAppointment(info)
                    .then((info) => {
                        console.log(info, "infoo")
                    }).catch((err) => {
                        console.log(err,"error")
                    })
            }
        });
        setEvents(newEvents);
    };

    return (
        <Box>
            <DnDCalendar
                localizer={localizer}
                defaultDate={date}
                defaultView="day"
                timeslots={1}
                view={'day'}
                views={{
                    day: true,
                }}
                min={new Date(0, 0, 0, 9, 0, 0)}
                max={new Date(0, 0, 0, 23, 30, 0)}
                events={events}
                localizer={localizer}
                onEventDrop={onEventResize}
                onEventResize={onEventResize}
                resizable
                step={30}
                selectable={true}
            />
        </Box>
    );
}

import React，{useState，useffect}来自“React”；
从“react big Calendar”导入{Calendar，momentLocalizer}；
从“力矩”中导入力矩；
使用dragAndDrop从“react big calendar/lib/addons/dragAndDrop”导入；
从“./styled”导入{Box}；
导入'react big calendar/lib/addons/dragandrop/styles.css'；
导入'react big calendar/lib/css/react big calendar.css'；
从“../api”导入{changeAppointment}；
导出默认功能日历（道具）{
const{date}=props；
const{data}=props；
常数定位器=力矩定位器（力矩）；
const DnDCalendar=带DragandDrop（日历）；
const[events，setEvents]=useState（[]）；
useffect（（）=>{
设tempEvents=[]；
data.forEach（（元素）=>{
常数数据={
标题：element.patient.name+，“+element.patient.phone，
id:element.id，
开始：矩.utc（element.datetime）.toDate（），
结束：矩.utc（element.datetime）.add（30，'minutes'）.toDate（），
};
tempEvents.push（数据）；
setEvents（tempEvents）；
});
}，[数据]；
const onEventResize=（数据）=>{
常量{start，end，event}=data；
const newEvents=[…事件]；
newEvents.forEach（（existingEvent）=>{
if（existingEvent.id==event.id）{
existingEvent.start=开始；
existingEvent.end=结束；
常数信息={
id:event.id，
日期时间：矩.utc（start）.format（），
};
更改预约（信息）
。然后（（信息）=>{
console.log（信息，“infoo”）
}).catch（（错误）=>{
console.log（err，“error”）
})
}
});
setEvents（newEvents）；
};
返回(
);
}

---

我附上了一个文件，显示了我谈论的日期

您可以使用

格式

道具执行此操作。它有多个用于格式化日期显示的选项，具体取决于当前查看的

视图


let格式={
dateFormat:'dd'，
dayFormat：（日期、区域性、本地化）=>
localizer.format（日期，'DDD'，区域性），
DayRangeHeadPerformat:（{开始，结束}，区域性，本地化）=>
格式（开始，{date:'short'}，区域性）+'-'+
格式（结束，{date:'short'}，区域性）
}

大多数采用
（日期：日期，区域性：？字符串，本地化器：对象）=>string
方法签名，除非它们处理范围，并使用为实例配置的
本地化器。所以，对你来说（使用似乎是使用瞬间），它会是这样的：

const dayFormat=（日期、区域性、本地化器）=>localizer.format（日期'D MMMM YYYY'，区域性）；
返回(
谢谢，伙计，很好用，谢谢你的解释；）