数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 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 实现日期选择器，但是我们自定义了日期选择器。用户可以看到我们向 DatePicker 组件传递了不同的 props。
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 props 自定义日期选择器的名称。
onChange - 每当用户从日期选择器中选择新的日期值时，都会触发一个事件。
Value - 它是日期的当前值。
使用 HTML input type =“date”和 React 创建日期选择器
HTML 包含 <input>，它可以从用户那里获取各种类型的输入，例如文本、数字、日期等。在这里，我们将使用 <input> 标签来创建日期选择器。
语法
用户可以按照以下语法使用 HTML input 来创建日期选择器。
<input
type="date"
value={date}
onChange={onDateChange}
/>
在上面的语法中，我们将日期值与输入绑定，并使用“date”作为类型来使用输入创建日期选择器。
示例 3
在下面的示例中，我们使用了 HTML input 来创建日期选择器，如上面的语法所示。此外，我们还使用了钩子来处理日期输入。每当用户选择日期时，它都会调用 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 input。HTML 日期输入不包含设置最小和最大日期限制或自动聚焦的功能。
在本教程中，我们学习了仅使用 HTML 和 React 库创建日期选择器的方法。建议使用 React 库创建日期选择器并对其进行更多自定义。
9K+ 阅读量
