[英]Getting TypeError : `month` must be a valid moment object in mobile Airbnb/react-dates
我正在為桌面和移動設備使用 react-dates DayPickerRangeController 但在移動設備中我收到此錯誤 - TypeError: month
must be a valid moment object
下面是我的代碼 -
/* 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;
這是您的手機版本,通過與非手機版本的比較,我們先嘗試將numberOfMonths
修復為 1。 然后你可以調試如果那是問題。
<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}
/>
你明白了,桌面版本正在運行,現在就使用那個版本。 據我所知,兩者都非常相似,它們只是呈現方式不同。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.