React Date-picker选择不工作的天数范围

Question

我想从React Date-Picker中显示选定日期的特定范围。我已经尝试了他们的文档网站演示代码。但是这个代码不起作用。解决方案是什么?下面是我的示例代码，'

import React, { useState } from 'react';
import { addDays, format } from 'date-fns';
import { DateRange, DayPicker } from 'react-day-picker';
const pastMonth = new Date();
const App = () => {
const defaultSelected: DateRange = {
from: pastMonth,
to: addDays(pastMonth, 4)
};
const [range, setRange] = useState < DateRange | undefined > (defaultSelected);
let footer = <p>Please pick the first day.</p>;
if (range?.from) {
if (!range.to) {
footer = <p>{format(range.from, 'PPP')}</p>;
} else if (range.to) {
footer = (
<p>
{format(range.from, 'PPP')}–{format(range.to, 'PPP')}
</p>
);
}
}
return (
<div>
<DayPicker
mode="range"
defaultMonth={pastMonth}
selected={range}
footer={footer}
onSelect={setRange}
/>
</div>
);
};
export default App;

我试图反应日期选择器文档网站选择天数范围演示代码，我想显示和选择基于react: 18.2.0的日期范围

Answer 1

我从前面的代码中删除所有类型作为js代码使用。试试这个:

import React, { useState } from 'react';
import { addDays, format } from 'date-fns';
import {  DayPicker } from 'react-day-picker';
const pastMonth = new Date();
const App = () => {
const defaultSelected = {
from: pastMonth,
to: addDays(pastMonth, 4)
};
const [range, setRange] = useState(defaultSelected);
let footer = <p>Please pick the first day.</p>;
if (range?.from) {
if (!range.to) {
footer = <p>{format(range.from, 'PPP')}</p>;
} else if (range.to) {
footer = (
<p>
{format(range.from, 'PPP')}–{format(range.to, 'PPP')}
</p>
);
}
}
return (
<div>
<DayPicker
mode="range"
defaultMonth={pastMonth}
selected={range}
footer={footer}
onSelect={setRange}
/>
</div>
);
};
export default App;