React 日期选择器

引言

我们经常会在各种论坛和网站上遇到需要输入出生日期或为任何原因选择约会日期的情况，这时一个日历图标就会出现在我们眼前。它是如何以及从何处弹出的？这一定是一个特殊的、动态驱动的日历，它能巧妙地识别并呈现给我们，以便我们选择所需的日期。这就是 React Date Picker 的用武之地。在本教程中，我们将从零开始学习到高级别的所有实现方法，了解它如何在 React 中实现以及如何进行自定义。让我们继续讨论。

React 日期选择器 (React Date Picker) 是一个有用且丰富的组件，用于通过日历对话框格式显示日期。如今，通常有很多日期选择器选项。它们都可以有不同的技术方面和应用。在本教程中，我们将专门介绍 React Date Picker。为此，我们需要一个显示时间和日期的包。为了更好地理解，我们将创建一个应用程序，帮助我们更好地理解 React Date Picker。但在此之前，让我们按照以下步骤进行安装。

安装

要为我们的 React 应用程序安装日期选择器，我们需要在我们的系统上预先安装 Node.js。虽然不总是需要 Node 模块，但强烈建议下载它们，以便所有依赖项都能高效地提供。因此，安装 React Date Picker 的命令如下。

可以通过 npm 安装该软件包：

或通过 Yarn 安装：

可能需要单独安装 React 及其 Proptypes，因为没有这些依赖项，就无法构建 React Date Picker。此外，我们可能需要使用外部软件包中的 CSS，以便日期选择器看起来更美观。要开始我们的应用程序，我们需要在主文件中导入 React Date picker，并通过 React 视图不断检查它。

React Datepicker 示例

假设我们的系统已配置好所有安装要求和依赖项，我们将从头开始学习如何创建 React 应用程序。此实现完全基于 React datepicker 的应用程序。

在上面的讨论中，我们假设已独立安装了 React 和 PropTypes，因为这些依赖项并未包含在包本身中。要继续构建应用程序的方法，我们需要遵循以下步骤。

使用命令进入项目文件夹。

启动 React 应用。

Node 引擎启动后，我们可以通过 localhost 的 3000 端口检查我们的应用程序。此外，我们需要将下面的代码片段包含在我们的 app.js 文件中，以便将 React Date Picker 的重要组件导入到我们的文件中。

我们的应用程序现在看起来会像这样。

在上面的示例代码中，我们首先在 React 模板中导入了 Datepicker 和 Bootstrap 的包。然后，我们定义了绑定 handle change 并将组件提交到事件日历。当用户提交或更改 Datepicker 的输入值时，这些事件将自动触发。之后，我们在构造函数中将 Datepicker 表单状态初始化为一个新的 Date() 对象。最后，我们用下面的指令初始化 Datepicker，为它添加一些属性。

我们可以以日历为中心的日期选择器格式可视化输出。上面给出的 Datepicker 为上面显示的 React 应用程序组件添加了自定义属性。它允许我们以月、日和年的形式选择日期。

此外，要自定义日期选择器，我们还有各种其他方法，无论是为组件着色还是巧妙地应用函数来选择日期。如果我们的 app.js 文件中有 HTML 和 CSS 组件，我们也可以轻松自定义它们。

本地化日期选择器

我们将学习的另一个实例是本地化日期选择器。我们将要制作的日期选择器高度依赖于 date-fns 的国际化。这是因为它用于本地化将要显示的项目。如果我们想使用 en-US 以外的区域设置，可能需要从 date-fns 将其导入到项目中。

此外，英语是默认的区域设置，它包含 3 种设置区域设置的方法。

register locale (string, object)：加载从 date-fns 导入的区域设置对象。

Set default locale (string)：将已注册的区域设置设置为所有日期选择器实例的默认设置。

getDefaultLocale: 返回一个字符串，显示当前设置的默认区域设置。

我们可以使用下面的代码片段将这些服务导入到日历视图的区域设置中。

在将这些区域设置服务导入并保存到我们的 app.js 文件后，我们的应用程序将如下所示。

在另一个实例中，要更改区域设置，我们需要主要更改区域设置代码或使用 date-fns 的国际化，以便代码审查可以得到支持。

在日期选择器中设置日历日期范围。

在此步骤中，我们将学习如何使用 minDate 和 maxDate 属性来实现范围功能。为此，我们将 date-fns 库中的 addDays API 导入到 React 组件的顶部。它将指定的日数添加到分配的日期以设置范围。

addDays() 方法通常接受两个参数

Date: 需要更新的日期。

Amount: 需要包含的显著天数。

我们可以轻松地在 React 日历中设置从当前到接下来的七天的日期范围。当我们实现下面所示示例代码中的 minDate 和 maxDate 方法时，可以理解这一点。

在实现了以上所有步骤后，我们应用程序的完整代码片段如下所示。

在上面的示例代码片段中，我们将 minDate 设置为入住组件，用户只能选择今天的日期之前的日期。我们为退房组件使用了日期值，这意味着用户不能选择退房日期之前的日期。

在下一步中，我们将保存状态的值并定义每个 handle 的工作方式。主要思想是通过为每个入住和退房日期创建具有定义值以及在那里保存数据来简单地实现它。唯一的区别在于退房组件的 minDate 方法，因为它完全依赖于入住组件。因此，确保所有值都设置正确，既不早也不晚，我们现在可以轻松选择日期并定义退房。

结论

在本教程中，我们通过一个简单的分步指南构建了一个自定义 React Datepicker 组件，该组件可以轻松地替换原生的 HTML5 日期选择器输入元素。我们学习了如何优先设置 React 应用程序，因为渲染 React 组件对于初学者来说可能很复杂，所以初学者总是会优先设置依赖项。我们还看到了各种示例，以建立一个清晰的关于在我们的应用程序中使用 Datepicker 组件的概念。我们还了解了本地化日期选择器的过程，这样如果日期被选择为日历上的特定时间段，日期选择过程就不会出现问题。

尽管本教程中创建的自定义日期选择器按预期工作，但它不符合日期选择器元素的所有高级要求。可以进行进一步改进，例如通过 props 实现 max 和 min，将输入类型从 text 切换为 date，并建立更好的可访问性改进。我们还可以开发本教程中实现的日期选择器的设计方法，通过导入 Bootstrap 包并添加自定义样式和悬停属性来使其看起来更好。