[英]correct start and end date is not selected
我正在使用react-big-calendar
来安排我的可用性和不可用性。 当我从 nov 5 拖动到 nov 6 时,我遇到了一个问题,然后它选择了 nov 4 到 nov 5 单元格。 为什么会这样? 我也截图了
例如,在这里你可以看到我选择了 11 月 13 日到 11 月 14 日,但是
选择 11 月 12 日和 11 月 13 日。
这是我的代码
const DnDCalendar = withDragAndDrop(Calendar);
const localizer = momentLocalizer(moment);
const Scheduler = ({ match }) => {
const [verb, setVerb] = React.useState("create");
const [open, setIsOpen] = React.useState(false);
const [event, setEvent] = React.useState();
const showEventForm = (event, verb = "create") => {
setVerb(verb);
setEvent(event);
setIsOpen(true);
};
const {
params: { guideId }
} = match;
const [createSchedule] = useMutation(CREATE_SCHEDULE);
const [updateSchedule] = useMutation(UPDATE_SCHEDULE);
const { data, loading } = useQuery(GET_SCHEDULE, {
skip: !guideId,
variables: { id: guideId }
});
const schedules = get(data, "getScheduleById", []);
const handleScheduleSubmit = async (val, mutation) => {
const finalVal = {
description: val.desc,
startdate: val.start,
enddate: val.end,
guideRefId: parseInt(guideId, 10)
};
console.log("finalVal", finalVal);
try {
await mutation({
variables: {
data: finalVal,
id: val.id
},
refetchQueries: [
{
query: GET_SCHEDULE,
variables: {
id: guideId
}
}
]
});
setIsOpen(false);
} catch (err) {
console.log("err", err);
}
};
const events =
schedules !== null && schedules.length > 0
? schedules.map(schedule => ({
...omit(schedule, ["startdate", "enddate", "description"]),
start: new Date(schedule.startdate),
end: new Date(schedule.enddate),
desc: schedule.description
}))
: [];
console.log("events", events);
return (
<>
<Wrapper>
{open && (
<ScheduleForm
event={event}
isOpen={open}
verb={verb}
mutation={verb === "update" ? updateSchedule : createSchedule}
handleScheduleSubmit={handleScheduleSubmit}
setIsOpen={() => setIsOpen(false)}
/>
)}
{loading ? (
<p>Loading...</p>
) : (
<DnDCalendar
selectable
events={events}
startAccessor="start"
endAccessor="end"
defaultDate={moment().toDate()}
localizer={localizer}
toolbar
resizable
onEventDrop={onEventDrop}
components={{
event: EventComponent,
agenda: {
event: EventAgenda
}
}}
onSelectSlot={event => showEventForm(event)}
onSelectEvent={event => showEventForm(event, "update")}
/>
)}
</Wrapper>
</>
);
};
export default Scheduler;
finalVal
中的handleScheduleSubmit
给出以下
description: undefined
enddate: Thu Nov 14 2019 00:00:00 GMT+0545 (Nepal Time) {}
guideRefId: 8
startdate: Wed Nov 13 2019 00:00:00 GMT+0545 (Nepal Time) {}
但是当发送到 api 时,它变成了这样,我在网络请求标头中检查了
enddate: "2019-11-13T18:15:00.000Z"
guideRefId: 9
startdate: "2019-11-12T18:15:00.000Z"
我该如何摆脱这个问题?
这是finalVal
object 中的原因, startdate
和enddate
键设置为您当地的 NPT 时区,即+0545 GMT
,
而在events
object 中, start
和end
键设置为+0000 GMT
,导致前一天,因为默认设置为午夜。
使用内置的moment.js
来修复这个时区转换问题。 有关更多信息,请参阅此。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.