[英]React js dateFns problem on codesandbox 'format' of undefined
Error:错误:
Cannot read property 'format' of undefined
Error in code:代码错误:
<span>{dateFns.format(currentDate, dateFormat)}</span>
Code:代码:
import React, { useState } from "react";
import dateFns from "date-fns";
import "./Calendar.css";
const Calendar = () => {
const [currentDate, setCurrentDate] = useState(new Date());
const [selectedDate, setSelectedDate] = useState(new Date());
const header = () => {
const dateFormat = "MMMM YYYY";
return (
<div className="header row flex-middle">
<div className="column col-start">
<div className="icon" onClick={prevMonth}>
chevron_left
</div>
</div>
<div className="column col-center">
<span>{dateFns.format(currentDate, dateFormat)}</span>
</div>
<div className="column col-end">
<div className="icon" onClick={nextMonth}>
chevron_right
</div>
</div>
</div>
);
};
const days = () => {
const dateFormat = "ddd";
const days = [];
let startDate = dateFns.startOfWeek(currentDate);
for (let i = 0; i < 7; i++) {
days.push(
<div className="column col-center" key={i}>
{dateFns.format(dateFns.addDays(startDate, i), dateFormat)}
</div>
);
}
return <div className="days row">{days}</div>;
};
const cells = () => {
const monthStart = dateFns.startOfMonth(currentDate);
const monthEnd = dateFns.endOfMonth(monthStart);
const startDate = dateFns.startOfWeek(monthStart);
const endDate = dateFns.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 = dateFns.format(day, dateFormat);
const cloneDay = day;
days.push(
<div
className={`column cell ${
!dateFns.isSameMonth(day, monthStart)
? "disabled"
: dateFns.isSameDay(day, selectedDate)
? "selected"
: ""
}`}
key={day}
onClick={() => onDateClick(dateFns.parse(cloneDay))}
>
<span className="number">{formattedDate}</span>
<span className="bg">{formattedDate}</span>
</div>
);
day = dateFns.addDays(day, 1);
}
rows.push(
<div className="row" key={day}>
{" "}
{days}{" "}
</div>
);
days = [];
}
return <div className="body">{rows}</div>;
};
const nextMonth = () => {
setCurrentDate(dateFns.addMonths(currentDate, 1));
};
const prevMonth = () => {
setCurrentDate(dateFns.subMonths(currentDate, 1));
};
const onDateClick = day => {
setSelectedDate(day);
};
return (
<div className="calendar">
<div>{header()}</div>
<div>{days()}</div>
<div>{cells()}</div>
</div>
);
};
export default Calendar;
Can you give me some advice?你能给我一些建议吗?
you have to import Format from date-fns/esm.您必须从 date-fns/esm 导入格式。 like this:
像这样:
import {format} from "date-fns/esm"
Problem here is in import这里的问题是导入
In this case you'll need to在这种情况下,您需要
import dateFns from "date-fns";
import dateFns from "date-fns";
删除import dateFns from "date-fns";
Then remove dateFns
from all the methods you'll need to import :然后从您需要导入的所有方法中删除
dateFns
:
{dateFns.format(currentDate, dateFormat)} {dateFns.format(currentDate, dateFormat)}
Correct version:正确版本:
{format(currentDate, dateFormat)}
Same should be done for同样应该做
let startDate = dateFns.startOfWeek(currentDate);
Correct version: let startDate = startOfWeek(currentDate);
正确版本:
let startDate = startOfWeek(currentDate);
etc. with the rest of the methods.等与其余的方法。
Import all the methods are used in your case from "date-fns":从“date-fns”导入您的案例中使用的所有方法:
import { format, startOfWeek, addDays, startOfMonth, endOfMonth, endOfWeek, isSameMonth, isSameDay, parse, subMonths, addMonths } from "date-fns";导入 { format, startOfWeek, addDays, startOfMonth, endOfMonth, endOfWeek, isSameMonth, isSameDay, parse, subMonths, addMonths } from "date-fns";
After those steps done it will work!完成这些步骤后,它将起作用!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.