React js 中的日期时间格式和日历中的 moment.js

Question

基本上我正在创建一个带有事件插件的日历，并为此使用 react-big-calendar。我能够创建 usestate 来添加事件并在日历中显示，但是每当我将开始日期和结束日期与时间坐标一起放置时，它不会显示事件，而当我只是将开始日期、结束日期没有时间坐标时，它就会显示它。

有点混淆这里发生了什么，因为当使用事件的核心价值时，它甚至没有添加时间就显示事件。需要帮助。

整个日历组件

import React, { useState } from 'react';
import "./CalendarNew.css"
import 'react-big-calendar/lib/css/react-big-calendar.css';
import { Badge } from 'antd';
import { Modal, Button } from 'antd';
import { TextField } from '@material-ui/core';
import { DatePicker, Space } from 'antd';
import { Checkbox } from 'antd';
import { Input } from 'antd';

import { Calendar, momentLocalizer } from 'react-big-calendar'
import moment from 'moment'

const now = new Date();
const { RangePicker } = DatePicker;

const localizer = momentLocalizer(moment)

function CalendarNew() {

    const [visible, setVisible] = React.useState(false);
    const [title, setTitle] = useState('');
    const [location, setLocation] = useState('');
    const [description, setDescription] = useState('');
    const [pickerDate, setPickerDate] = useState(null)
    const [startDate, setStartDate] = useState(null)
    const [endDate, setEndDate] = useState(null)




    const realEvents = [{
        id: 0,
        title: titles,
        location: locations,
        start: new Date(startDate),
        end: new Date(endDate),
        description: description,

    }]



    const events = [
        {
            id: 0,
            title: 'All Day Event very long title',
            allDay: true,
            start: new Date(2021, 8, 1, 0, 20, 20),
            end: new Date(2021, 8, 3, 0, 20, 20),
            location: 'melbourne',
        },
        {
            id: 1,
            title: 'Long Event',
            start: new Date(2021, 8, 7),
            end: new Date(2021, 8, 10),
            location: 'sydney',
        },


    ]

    // for PopUp
    const showModal = () => {
        setVisible(true);
    };


    const handleCancel = () => {
        console.log('Clicked cancel button');
        setVisible(false);
    };




    const handleOk = (event) => {
        event.preventDefault();

        // setTitle("");
        // setLocation("");
        // setDescription("");
        // setPickerDate(new Date())
        setStartDate(pickerDate[0].format('YYYY, M, D, h,MM,ss'))
        setEndDate(pickerDate[1].format('YYYY, M, D,h,MM,ss'))
        console.log("Title = ", title, ',Location = ', location, ',Description = ', description, "Daterange =", pickerDate[0].format('YYYY, M, D,h,MM,ss'))
        setVisible(false);


    };


    // title eventListner
    const titleChange = (event) => {
        setTitle(event.target.value)
    }
    // location eventListner
    const locationChange = (event) => {
        setLocation(event.target.value)
    }
    // description eventListner
    const descriptionsChange = (event) => {
        setDescription(event.target.value)
    }
    // range picker eventListner
    const dateChange = (dateString) => {
        setPickerDate(dateString)
    }
    console.log(title)
    ///console.log("range picker start date", pickerDate[0])
    console.log("range picker end date", endDate)

    return (
        <div>
            <Calendar
                localizer={localizer}
                events={realEvents}
                startAccessor="start"
                endAccessor="end"
                style={{ height: 500 }}
                
            />
            {/* PopUp */}
            <Modal
                centered={true}
                title="Event's"
                visible={visible}
                maskClosable={true}


                visible={visible}
                onCancel={handleCancel}

                footer={[
                    <Button onClick={handleCancel}>
                        Cancel
                    </Button>,
                    <Button onClick={handleOk} form="popup_form" key="submit" htmlType="submit" type="primary">
                        Ok
                    </Button>
                ]}

            >
                <div className="form-popup">
                    <form id="popup_form">
                        <div className="row-1">
                            <div className="title">
                                <TextField
                                    style={{ width: '195px' }}
                                    id="title"
                                    name="title"
                                    label="Title"
                                    value={title}
                                    onChange={titleChange}

                                    placeholder={'Title of event'}
                                    variant="standard"
                                />
                            </div>
                            <div className="location">
                                <TextField
                                    style={{ width: '200px' }}
                                    id="location"
                                    name="location"
                                    label="Location"
                                    value={location}
                                    onChange={locationChange}
                                    placeholder={'Location of event'}
                                    variant="standard"
                                />
                            </div>
                        </div>
                        <div className="row-2">
                            <div className="start-calendar">
                                <Space direction="vertical" size={12}>
                                    <RangePicker
                                        id="date-picker"
                                        name="date_picker"
                                        value={pickerDate}
                                        onChange={dateChange}
                                        format="YYYY-M-D HH:mm:ss"
                                        placeholder={['Start date', 'End date']}
                                        style={{ width: '420px' }}
                                        size={'large'} />
                                </Space>
                            </div>
                        </div>
                        <div className='row-3'>
                            <div className='checkbox'>
                                <Checkbox
                                    id="all_day"
                                    name="all_day"
                                >
                                    All day
                                </Checkbox>
                            </div>
                        </div>
                        <div className='row-4'>
                            <div className='description'>
                                <label>
                                    <TextField
                                        style={{ width: '420px' }}
                                        id="description"
                                        name="description"
                                        label="Description"
                                        value={description}
                                        onChange={descriptionChange}
                                        multiline
                                        rows={1}
                                        placeholder={'description of event'}
                                        variant="standard"
                                    />
                                </label>
                            </div>
                        </div>

                    </form>
                </div>
            </Modal>
        </div>
    )
}

export default CalendarNew;

使用无时间坐标的状态输出

showing the events

使用带时间坐标的状态输出 要添加时间坐标，我将 startDate、endDate 状态设置为：

setStartDate(pickerDate[0].format('YYYY, M, D, h,MM,ss')) 

setEndDate(pickerDate[1].format('YYYY, M, D,h,MM,ss'))

image is here but no event showing

使用带有时间坐标的硬编码数据输出 在代码中使用名为事件的对象

image is here

Answer 1

React-Big-Calendar 中的所有日期都是真正的 JS 日期对象。甚至是您在活动中使用的那些。构建事件时，请确保使用 Date 作为开始和结束日期，尤其是当您将它们添加到道具中使用的 events 时。

Answer 2

因此，错误出在状态中的格式部分本身。正确答案：

setStartDate(pickerDate[0].format('YYYY, M, D, HH:mm:ss')) 

setEndDate(pickerDate[1].format('YYYY, M, D, HH:mm:ss'))

React js 中的日期时间格式和日历中的 moment.js

Date time format in react js and moment.js in a Calendar

date-formatting

momentjs

reactjs

antd

react-big-calendar