未选择正确的开始和结束日期

Question

我正在使用react-big-calendar 来安排我的可用性和不可用性。当我从 11 月 5 日拖动到 11 月 6 日然后它选择 11 月 4 到 11 月 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;

handleScheduleSubmit 中的finalVal 对象给出以下内容

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"

如何解决这个问题？

Answer 1

这是在 finalVal 对象中的原因，startdate 和 enddate 键设置为您当地的 NPT 时区，即 +0545 GMT，

在 events 对象中，start 和 end 键设置为 +0000 GMT，导致前一天，因为默认设置为午夜。

使用内置的moment.js 来修复这个时区转换问题。请参阅this 了解更多信息。