如何解决使用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 举报,一经查实,本站将立刻删除。