获取 TypeError：`month` 必须是移动 Airbnb/react-dates 中的有效时刻 object

Question

I am using react-dates DayPickerRangeController for desktop and mobile but in mobile I am getting this error - TypeError: month must be a valid moment object

Below is my code -

/* eslint-disable @typescript-eslint/no-explicit-any */
import React, { ReactElement, useContext, useState } from "react";
import { DayPickerRangeController, FocusedInputShape } from "react-dates";
import { makeStyles } from "@material-ui/core/styles";
import "react-dates/initialize";
import "react-dates/lib/css/_datepicker.css";
import moment, { Moment } from "moment";
import { useTheme } from "@material-ui/core/styles";
import useMediaQuery from "@material-ui/core/useMediaQuery";
import KeyboardArrowLeftIcon from "@material-ui/icons/KeyboardArrowLeft";
import KeyboardArrowRightIcon from "@material-ui/icons/KeyboardArrowRight";
import IconButton from "@material-ui/core/IconButton";
import {
  BookingFlowStateContext,
  BookingFlowUpdaterContext,
} from "../../context/BookingFlowContext";

const useStyles = makeStyles(() => ({
  wrapper: {
    height: "500px",
  },
  nextArrow: {
    right: "10px",
    top: "12px",
    position: "absolute",
  },
  prevArrow: {
    left: "10px",
    top: "12px",
    position: "absolute",
  },
}));

const DaySelector = (props: {
  packageStartDate: string;
  packageEndDate: string;
}): ReactElement => {
  const classes = useStyles();
  const { packageStartDate, packageEndDate } = props;
  const bookingDetails = useContext(BookingFlowStateContext);
  const setDetails = useContext(BookingFlowUpdaterContext);
  const [startDate, setStartDate] = useState<Moment | null>(
    bookingDetails.travelStartDate
  );
  const [endDate, setEndDate] = useState<Moment | null>(
    bookingDetails.travelEndDate
  );
  const [focusedInput, setFocusedInput] = useState<FocusedInputShape | null>(
    "startDate"
  );
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.only("xs"));

  const handlendDatesChange = (arg: {
    startDate: moment.Moment | null;
    endDate: moment.Moment | null;
  }) => {
    setStartDate(arg.startDate);
    setEndDate(arg.endDate);
    setDetails &&
      setDetails({
        ...bookingDetails,
        dates: `${moment(arg.startDate).format("D MMM")} - ${moment(
          arg.endDate
        ).format("D MMM YYYY")}`,
        travelStartDate: arg.startDate,
        travelEndDate: arg.endDate,
      });
  };

  const handleFocusChange = (arg: FocusedInputShape | null) => {
    setFocusedInput(arg);
  };

  const numberOfMonths = moment(packageEndDate).diff(
    moment(packageStartDate),
    "months",
    true
  );

  const isOutsideRange = (day: {
    isAfter: (arg0: moment.Moment) => any;
    isBefore: (arg0: moment.Moment) => any;
  }) =>
    day.isAfter(moment(packageEndDate)) ||
    day.isBefore(moment(packageStartDate));

  return (
    <div className={classes.wrapper}>
      {isMobile && (
        <DayPickerRangeController
          startDate={startDate}
          endDate={endDate}
          isOutsideRange={isOutsideRange}
          onDatesChange={handlendDatesChange}
          focusedInput={focusedInput}
          onFocusChange={handleFocusChange}
          initialVisibleMonth={() => moment(new Date(bookingDetails.monthYear))}
          orientation="verticalScrollable"
          numberOfMonths={numberOfMonths}
          endDateOffset={(day) => day.add(bookingDetails.nights, "days")}
          verticalHeight={400}
          noNavButtons
          weekDayFormat="ddd"
          daySize={46}
        />
      )}
      {!isMobile && (
        <DayPickerRangeController
          startDate={startDate}
          endDate={endDate}
          isOutsideRange={isOutsideRange}
          onDatesChange={handlendDatesChange}
          focusedInput={focusedInput}
          onFocusChange={handleFocusChange}
          initialVisibleMonth={() => moment(new Date(bookingDetails.monthYear))}
          numberOfMonths={1}
          endDateOffset={(day) => day.add(bookingDetails.nights, "days")}
          weekDayFormat="ddd"
          daySize={64}
          navNext={
            <IconButton
              aria-label="next"
              className={classes.nextArrow}
              data-testid="calandarNextIcon"
            >
              <KeyboardArrowRightIcon fontSize="small" />
            </IconButton>
          }
          navPrev={
            <IconButton
              aria-label="next"
              className={classes.prevArrow}
              data-testid="calandarPrevIcon"
            >
              <KeyboardArrowLeftIcon fontSize="small" />
            </IconButton>
          }
        />
      )}
    </div>
  );
};

export default DaySelector;

Can anyone tell me where I am doing wrong. I am attaching the image which shows the error.

Answer 1

this is your mobile version, by comparing with non-mobile version, let's try fix numberOfMonths to 1 first. And then you can debug if that is the issue.

        <DayPickerRangeController
          startDate={startDate}
          endDate={endDate}
          isOutsideRange={isOutsideRange}
          onDatesChange={handlendDatesChange}
          focusedInput={focusedInput}
          onFocusChange={handleFocusChange}
          initialVisibleMonth={() => moment(new Date(bookingDetails.monthYear))}
          orientation="verticalScrollable"
          numberOfMonths={numberOfMonths}
          endDateOffset={(day) => day.add(bookingDetails.nights, "days")}
          verticalHeight={400}
          noNavButtons
          weekDayFormat="ddd"
          daySize={46}
        />

You get the idea, desktop version is working, just use that version for now. as far as I see, both are very similar, they only differ in presentation.