英文:
Year date range input in Reactjs
问题
有人知道如何在reactjs中实现年份范围输入（选择年份，例如2013-2023）吗？我尝试过使用react-year-range-picker，但它不起作用。
英文:
Does anyone know how to do year range input (to choose the years such as 2013-2023) in reactjs. I have tried with react-year-range-picker. But this doesnot work
答案1
得分: 1
要在React中创建一个年份范围输入，您可以使用react-year-range-picker模块。然而，此模块需要一些对等依赖，如styled-components，所以您需要像这样安装此模块：
npm i react-year-range-picker styled-components --legacy-peer-deps
这段代码可以正常运行：
import React, { useState } from "react";
import { YearRangePicker } from "react-year-range-picker";
const App = () => {
const [yearRange, setYearRange] = useState({
startYear: 2010,
endYear: 2020,
});
return (
<div>
<h1>年份范围选择器</h1>
<YearRangePicker
minYear={2000}
maxYear={2030}
onSelect={(startYear, endYear) => {
setYearRange({ startYear, endYear });
}}
startYear={yearRange.startYear}
endYear={yearRange.endYear}
/>
<p>
选择的年份范围：{yearRange.startYear} - {yearRange.endYear}
</p>
</div>
);
};
export default App;
英文:
To create a year range input in React, You can use react-year-range-picker module. However, this module requires some peer dependencies such as styled-components so you need to install this module like this:
npm i react-year-range-picker styled-components --legacy-peer-deps
This code works fine:
import React, { useState } from "react";
import { YearRangePicker } from "react-year-range-picker";
const App = () => {
const [yearRange, setYearRange] = useState({
startYear: 2010,
endYear: 2020,
});
return (
<div>
<h1>Year Range Picker</h1>
<YearRangePicker
minYear={2000}
maxYear={2030}
onSelect={(startYear, endYear) => {
setYearRange({ startYear, endYear });
}}
startYear={yearRange.startYear}
endYear={yearRange.endYear}
/>
<p>
Selected Years: {yearRange.startYear} - {yearRange.endYear}
</p>
</div>
);
};
export default App;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论