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;

Output 使用 state 沒有時間坐標

顯示事件

Output 使用帶時間坐標的 state要添加時間坐標，我將 startDate、endDate state 設置為：

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

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

圖片在這里，但沒有顯示事件

Output 使用帶有時間坐標的硬編碼數據在代碼中使用 object 命名事件

圖片在這里

Answer 1

React-Big-Calendar 中的所有日期都是真正的 JS 日期對象。 甚至是您在活動中使用的那些。 構建事件時，請確保使用Date作為開始和結束日期，尤其是當您將它們添加到道具中使用的events時。

Answer 2

因此，錯誤出在 state 中的格式部分本身。正確答案：

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

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