使用React和date-fns /行为构建的日历根据时区而不同

问题描述

按照本教程-https://medium.com/@w.difulvio523/create-a-custom-hooks-calendar-in-react-e50bbba456e1

，我使用React和date-fns创建了日历

然后，我在cell函数中添加了一个功能，该功能创建并映射了月份中的日子， 从mongoDB中获取schedule。

但是，如果时间表是今天，则时间表会在其实际日期+ 1时呈现。如果在今天，时间表将在欧洲/柏林时区的明天呈现。 但是它将在巴西时区正确呈现。

您可以在此Codepen中检查它-https://codepen.io/luispaulopinto/pen/abNNmZa

这就是cell函数的样子

    const cells = () => {
        const monthStart = startOfMonth(currentDate) 
        const monthEnd = endOfMonth(monthStart) 
        const startDate = startOfWeek(monthStart,{weekStartsOn: 1}) 
        const endDate = endOfWeek(monthEnd)
        const dateFormat = "d" 
        const rows = []
        let days = []
        let day = startDate 
        let formattedDate = ""


        while (day < endDate) {
            for (let i = 0; i < 7; i++) {
                formattedDate = format(day,dateFormat) 
                const cloneDay = day

                //here get the schdules
                //and render in cells.
                //if the schduels.date is same as 'day' or 'clone day',//render <Link/> to Exercise element with corresponding ID
            
                // //split and reforamt the cloneDay to compare with schedule object's date
                const formatCloneDay = day.toISOString().split('T')[0]

                // console.timeLog(formatCloneDay)

                const scheduleElements = exerciseScheduleArray.map(schedule => {
                    //reformat for the compare with formatCloneday
                    const formatScheduleDate = schedule.date.split('T')[0]

                    const hasMatchingDays = formatScheduleDate.toString() === formatCloneDay.toString()

                    if(hasMatchingDays) {
                        return (
                                <Link className="schedule-link" to={`/exercise/${schedule.exercise}`} key={schedule._id}>
                                    <span>{schedule.bodySection} {schedule.duration}</span> 
                                </Link>
                        )
                    }
                })

                days.push( 
                    <div
                        className={`column cell ${
                            !isSameMonth(day,monthStart) ? "disabled" : 
                            isSameDay(day,selectedDate) ? "selected" : "" }`}
                        key={day}
                        onClick={() => onClickDate(cloneDay)} 
                    >
                        <span className="number">{formattedDate}</span>
                        <span className="bg">{formattedDate}</span> 
                        {scheduleElements}
                    </div>
                )
                //this will increase the day value by 1 each time it iterates
                day = addDays(day,1)
            }
            rows.push(
                <div className="row" key={day}> {days} </div>
            )
            //if 7 days has been pushed to the rows,delete the days
            //so it Could start a new row with new days
            days = []
        }
        return <div className="body">{rows}</div> 
    }

我想知道是什么引起了这个问题？ 在欧洲时区如何也能得到正确的结果？

我搜索并找到此线程-https://github.com/date-fns/date-fns/issues/376 并尝试使用moment.js来查看其是否正常运行，但结果与 moment.js

我现在的猜测是

a。 Date对象的创建方式及其UTC格式会导致基于时区的不同行为。

b。 day语句内的day + 1值为if(hasMatching)。而且我想知道这是否还会影响它如何渲染schedule元素。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）