如何在 ReactJS 中创建日期选择器?
日期选择器允许应用程序的用户选择日期。如果我们从用户那里获取字符串格式的数据，他们可能会在输入日期时出错，并输入错误的日期格式。
因此，获取用户正确日期输入的最佳方法是使用日期选择器。在本教程中，我们将使用 ReactJS 的各种库来创建一个日期选择器，允许用户选择任意日期、月份、年份或十年。
使用"react-date-picker"NPM 包
React 提供了各种库和 npm 包来操作日期和时间。 "react-date-picker" 是允许用户选择日期的最佳库之一。
此外，它还提供各种额外功能来自定义日期字段。
在开始使用"react-date-picker"之前，我们需要将其安装到我们的 React 项目中。在项目目录下的终端中使用以下命令。
npm i react-date-picker
语法
用户可以按照以下语法使用 react-date-picker。
import DatePicker from "react-date-picker";
<DatePicker onChange={onDateChange} value={dateValue} />
在上述语法中，我们已经从"react-date-picker"导入了 DatePicker。之后，我们在 React 组件中使用了 DatePicker。此外，我们还在 DatePicker 组件中添加了 onChange 事件。
示例 1
在下面的示例中，我们从 react-date-picker 导入了 DatePicker。之后，我们在 App.js 文件中使用了 DatePicker 组件。DatePicker 组件接受各种 props。我们使用 value props 将默认日期值传递给了组件。
此外，我们还在组件中添加了 onChange 事件，以便在用户选择新日期时触发 onDateChange() 函数。此外，我们还使用了 useState 钩子来处理新选择的日期值。
import React, { useState } from "react";
import DatePicker from "react-date-picker";
export default function App() {
const [dateValue, onDateChange] = useState(new Date());
return (
<>
<h2>
Using the <i> react-date-picker </i> with the react functional
components.{" "}
</h2>
<h3>Select any date from the below date picker.</h3>
<div>
<DatePicker onChange={onDateChange} value={dateValue} />
</div>
</>
);
}
输出
示例 2
在此示例中，我们也使用 react-date-picker 实现了日期选择器，但我们对其进行了自定义。用户可以看到，我们已将不同的 props 传递给 DatePicker 组件。
autofocus props 允许我们在组件挂载时自动聚焦到日期选择器上。此外，我们传递了 closeCalender props 的 false 布尔值，以防止在用户选择日期时关闭日历。用户需要点击日历外部才能关闭日历。
className props 允许我们将类传递给子组件，并使用类名来设置这些组件的样式。
import React, { useState } from "react";
import DatePicker from "react-date-picker";
export default function App() {
const [dateValue, onDateChange] = useState(new Date());
const mystyle = {
color: "blue",
backgroundColor: "lightblue",
padding: "2rem",
};
return (
<>
<div style={mystyle}>
<h2>
Using the<i>react-date-picker</i>with the react functional components.
</h2>
<div>
<DatePicker
onChange={onDateChange}
value={dateValue}
autoFocus={true}
className="date-picker"
closeCalendar={false}
/>
</div>
</div>
</>
);
}
输出
在上面的输出中，用户还可以观察到我们如何向网页添加样式。
React-date-picker-props
在这里，我们将学习一些有用的 props，我们可以将它们传递给 Datepicker 组件来自定义日期。
disabled − 它允许我们禁用日期选择器。
format − 我们可以使用 format props 指定输入日期的格式。
isOpen − 它允许您设置是否应打开日历。
maxDate − 我们可以使用 maxDate props 设置日期选择的最大限制。
minDate − 我们可以指定选择的最小限制日期。
name − 我们可以使用 name 属性自定义日期选择器的名称。
onChange − 每当用户从日期选择器中选择新的日期值时，都会触发事件。
Value − 这是日期的当前值。
使用 HTML 输入类型 = "date" 和 React 创建日期选择器
HTML 包含 <input>，它可以接受用户的各种类型的输入，例如文本、数字、日期等。这里，我们将使用 <input> 标签来创建日期选择器。
语法
用户可以按照以下语法使用 HTML 输入创建日期选择器。
<input
type="date"
value={date}
onChange={onDateChange}
/>
在上述语法中，我们将日期值与输入框绑定，并使用"date"作为类型，从而使用输入框创建日期选择器。
示例 3
在下面的示例中，我们使用 HTML 输入框创建了一个日期选择器，如上述语法所示。此外，我们还使用了钩子来处理日期输入框。每当用户选择日期时，它都会调用 onDateChange() 函数，并且我们使用 setDate() 函数将日期值设置为 date 变量。
import React, { useState } from "react";
export default function App() {
const [date, setDate] = useState("none");
const onDateChange = (event) => {
setDate(event.target.value);
};
const mystyle = {
color: "black",
backgroundColor: "lightgrey",
padding: "2rem",
width: "700px",
};
const dateStyle = {
backgroundColor: "red",
width: "13.2rem",
height: "2rem",
fontSize: "1.5rem",
};
return (
<>
<div style={mystyle}>
<h2>
Using the <i>HTML date input </i> with the react functional components.
</h2>
The selected date is {date}
<div>
<input
type="date"
style={dateStyle}
value={date}
onChange={onDateChange}
/>
</div>
</div>
</>
);
}
输出
在上面的输出中，用户可以观察到我们在日期输入字段上应用的样式。因此，我们可以像自定义普通 HTML 元素的样式一样自定义日期输入字段的样式。
现在用户可以理解为什么我们应该使用 react-date-picker 而不是 HTML 输入框。HTML 日期输入框不包含设置最小和最大日期限制或自动对焦的功能。
在本教程中，我们学习了仅使用 HTML 和 React 库创建日期选择器。建议使用 React 库来创建日期选择器并对其进行更多自定义。
