React 中十大最佳日期选择器

介绍

海伦·凯勒

介绍

日期选择器是一种图形用户界面，允许用户从日历中选择日期和/或从时间范围内选择时间。日期选择器的常见实现方式是提供一个文本框，点击文本框输入日期后，会弹出一个日历；选中日历上的某个日期或时间后，文本框中就会显示该日期或时间对应的文本。

使用日期选择器的一些优点包括：

用户输入日期变得更加容易，而且您可以控制接收到的数据格式。
只能输入有效日期。
日期格式正确，避免混淆。
日期选择器可以帮助用户选择日期，例如，根据所选国家/地区并集成用户自己的日历，选择常用节假日。
用户只需点击弹出日历中的日期即可输入日期，而无需将手从鼠标上移开来输入日期，从而降低了过程中出错的可能性。

在本教程中，我们将根据NPM上估计的每周下载量，从最少到最多，来介绍 React 中排名前十的日期选择器。

10). @ y0c/react-datepicker

这款日期选择器组件灵活、可复用、移动友好，适用于 React。之前的版本依赖于moment.js，但由于打包体积问题，现在已更改为Day.js。

简要概述：

版本

1.0.4

执照

麻省理工学院

预计每周下载量

677

未包装尺寸

154kb

链接到存储库

@yoc/react-日期选择器

代码演示/示例

在本简短教程中，我将向大家展示如何安装、显示和获取 DatePicker 中选择的日期的值。

步骤 1

我们需要安装 React，这可以通过 Create-React-App 完成。我写了一篇关于如何安装的文章，链接在这里。

完成上述步骤后，我们需要在终端中导航到我们的文件夹路径，然后运行 npm 命令来安装我们的日期选择器包：

npm i @y0c/react-datepicker

步骤 2

import React from "react";
import { DatePicker, RangeDatePicker } from "@y0c/react-datepicker";
import "@y0c/react-datepicker/assets/styles/calendar.scss";

const YocReactDatePicker = () => {
  const onChangeValue = (date) => {
    const dateValue = date.toDate();
    console.log(dateValue);
  };

  const onChangeRangeValue = (title) => (...date) => console.log(date);

  return (
    <div>
      <h1>YOC DatePicker Example</h1>
      <DatePicker onChange={onChangeValue} />

      <br />
      <br />
      <h1>YOC Date Range Picker Example</h1>
      <RangeDatePicker onChange={onChangeRangeValue("date")} />
    </div>
  );
};

export default YocReactDatePicker;

我们在这里创建了一个新文件。之后，我们需要导入React、DatePicker、RangeDatePicker以及CSS 资源。

接下来，我们创建了一个包含两个变量的函数组件。第一个变量名为onChangeValue，它接收一个参数；第二个变量名为onChangeRangeValue。 这两个变量允许我们将日期数据记录到控制台中。

最后，在我们的代码中，我们通过调用以下两个函数来显示日期选择器：以及那是之前进口的。

每个对象都有一个onChange属性，该属性接收我们之前创建的变量。

结果

可能存在的错误

您可能会遇到“错误：找不到模块 'node-sass'”的提示。遇到此错误信息时，您只需npm install node-sass在终端或命令行中运行相应的命令即可。

9). Materialui-日期范围选择器

这是一个使用 Material-UI 的 React 日期范围选择器。Material-UI 是最流行的 React 组件库，在全球拥有数百万用户。

简要概述：

版本

1.1.92

执照

麻省理工学院

预计每周下载量

5,135

未包装尺寸

1.12 MB

链接到存储库

materialui-daterange-picker

代码演示/示例

在本简短教程中，我将向大家展示如何安装、显示和获取 DatePicker 中选择的日期的值。

步骤 1

我们需要安装 React，这可以通过 Create-React-App 完成。我写了一篇关于如何安装的文章，链接在这里。

完成上述步骤后，我们需要在终端中导航到我们的文件夹路径，然后运行 npm 命令来安装我们的日期选择器包：

npm i materialui-daterange-picker

步骤 2

import React from "react";
import { DateRangePicker } from "materialui-daterange-picker";

const MaterialUiDateRange = () => {
  const [open, setOpen] = React.useState(true);

  const toggle = () => {
    setOpen(open);
  };


  const setDateRange = (date) => {
    console.log(date.startDate, date.endDate);
    alert(date.startDate, date.endDate);
  };
  return (
    <div>
      <h1>Material UI Date Range</h1>
      <DateRangePicker
        open={open}
        toggle={toggle}
        onChange={(date) => setDateRange(date)}
      />
    </div>
  );
};

export default MaterialUiDateRange;

这里我们按预期导入了React和DateRangePicker。然后我们创建了一个函数式组件。在这个组件中，我们声明了一个名为useState 的React Hook ，它接收一个变量 (open) 和一个函数 (setOpen) 作为参数。

我们将useState 的默认值设置为true，因为这样日期选择器才能显示在页面上。

接下来，我们将一个匿名函数赋值给一个名为 toggle 的变量。这样可以确保无论系统处于何种状态，日期选择器始终保持打开状态。

然后我们创建一个名为setDateRange 的变量。该变量接收一个匿名函数作为参数，该函数会记录并弹出所选日期的值。我们可以获取开始日期和结束日期的值。

最后，在我们的返回中，我们将 < DateRangePicker /> 组件中的每个 props 分配给每个变量。

结果

8). React-DateTime-Picker

这是一个快速、轻量级且易于自定义样式的日期选择器，但仅支持现代浏览器。它仅兼容 React 16.3 或更高版本。如果您使用的是旧版本的 React，请参考下表查找合适的 React-DateTime-Picker 版本。

React 版本	最新兼容的 React-DateTime-Picker 版本
≥16.3	最新的
≥16.0	2.x

简要概述：

版本

3.1.0

执照

麻省理工学院

预计每周下载量

20,973

未包装尺寸

193 kB

链接到存储库

react-datetime-picker

代码演示/示例

在本简短教程中，我将向大家展示如何安装、显示和获取 DatePicker 中选择的日期的值。

步骤 1

我们需要安装 React，这可以通过 Create-React-App 完成。我写了一篇关于如何安装的文章，链接在这里。

完成上述步骤后，我们需要在终端中导航到我们的文件夹路径，然后运行 npm 命令来安装我们的日期选择器包：

npm i react-datetime-picker

步骤 2

import React, { useState } from 'react';
import DateTimePicker from 'react-datetime-picker';

const ReactDateTimePicker = () => {

  const [value, onChange] = useState(new Date());

  const getDateValue = (value) => {
    onChange(value)
    console.log(value)
    alert(value)
  }


  return (
    <div>
      <h2>React Date Time Picker</h2>
      <DateTimePicker
        onChange={getDateValue}
        value={value}
      />
    </div>
  )
}

export default ReactDateTimePicker

根据以上代码，我们导入了React、useState和DateTimePicker，然后创建了一个函数式组件。接着，我们声明了一个名为 useState 的React Hook ，它接收一个变量（value）和一个函数（onChange）。

该值包含当前日期，默认情况下将显示在输入字段中。

接下来，我们创建了一个名为getDateValue的变量。该变量接收一个匿名函数作为参数，该函数用于记录并显示所选日期的值。此外，匿名函数内部还调用了onChange函数，该函数会使输入字段中的日期值根据所选日期而变化。

最后，在返回结果中，我们将变量传递给 props。成分。

结果

7). react-date-range

这是一个 React 日期选择器组件，用于选择日期和日期范围。它使用 date-fns 进行日期操作。此日期选择器的一些特性包括：

无状态日期操作
高度可配置
多范围选择
基于原生 JavaScript 日期
拖放选择
键盘友好

简要概述：

版本

1.1.3

执照

麻省理工学院

预计每周下载量

63,883

未包装尺寸

1.92 MB

链接到存储库

react-date-range

代码演示/示例

在本简短教程中，我将向大家展示如何安装、显示和获取 DatePicker 中选择的日期的值。

步骤 1

我们需要安装 React，这可以通过 Create-React-App 完成。我写了一篇关于如何安装的文章，链接在这里。

完成上述步骤后，我们需要在终端中导航到我们的文件夹路径，然后运行 npm 命令来安装我们的日期选择器包：

npm i react-date-range

步骤 2

import React, { useState } from "react";
import "react-date-range/dist/styles.css"; // main style file
import "react-date-range/dist/theme/default.css"; // theme css file
import { Calendar } from "react-date-range";

const ReactDateRange = () => {

  const handleSelect = (date) => {
    console.log(date);
    alert(date);
  };


  return (
    <div>
      <h2>React Date Range</h2>
      <Calendar date={new Date()} onChange={handleSelect} />
    </div>
  );
};

export default ReactDateRange;

我们做的第一件事是导入React、主题的 CSS 文件以及react-date-range 中的必要组件。

接下来，我们创建了一个名为handleSelect 的函数，该函数有助于将日期值记录到控制台。

最后，在我们的返回中，我们的第一个组件叫做我们声明了一些属性并为其赋值了一些变量。第一个是 date 属性，它接收一个新的日期值；第二个是onChange属性，它接收handleSelect变量，该变量会将日期值输出到控制台。

结果

6). react-date-picker

这是一个快速、轻量级且易于自定义样式的日期选择器，但仅支持现代浏览器。使用此日期选择器，您可以选择日、月、年，甚至十年。

它仅兼容 React 16.3 或更高版本。如果您使用的是旧版本的 React，请参考下表查找合适的 React-DateTime-Picker 版本。

React 版本	最新兼容的 React-Date-Picker 版本
≥16.3	最新的
≥16.0	7.x

简要概述：

版本

8.0.7

执照

麻省理工学院

预计每周下载量

78,779

未包装尺寸

209 kB

链接到存储库

react-date-picker

代码演示/示例

在本简短教程中，我将向大家展示如何安装、显示和获取 DatePicker 中选择的日期的值。

步骤 1

我们需要安装 React，这可以通过 Create-React-App 完成。我写了一篇关于如何安装的文章，链接在这里。

完成上述步骤后，我们需要在终端中导航到我们的文件夹路径，然后运行 npm 命令来安装我们的日期选择器包：

npm i react-date-picker

步骤 2

import React, { useState } from "react";
import DatePicker from "react-date-picker";

const ReactDatePicker = () => {
  const [value, onChange] = useState(new Date());

  const dateValue = (range) => {
    onChange(range)
    console.log(range);
    alert(value);
  };

  return (
    <div>
      <h2>React Date Picker</h2>
      <DatePicker onChange={dateValue} value={value} />
    </div>
  );
};

export default ReactDatePicker;

根据以上代码，我们导入了 React、 useState和DatePicker，然后创建了一个函数式组件。接下来，我们声明了一个名为useState 的React Hook ，它接收一个变量（value）和一个函数（onChange）。

该值取自当前日期，默认情况下将显示在输入字段中。

接下来，我们创建了一个名为dateValue的变量。该变量接收一个匿名函数作为参数，该函数用于记录并显示所选日期的值。此外，匿名函数内部还调用了onChange 函数，这使得输入字段中的日期值会根据所选日期而变化。

最后，在我们的返回中，我们将变量传递给 < DatePicker /> 组件内部的 props。

结果

5). react-big-calendar

这是一个用 React 构建的事件日历组件，专为现代浏览器（即 IE10+）设计，并使用 flexbox 而不是传统的基于表格的方法。

react-big-calendar提供了三种日期格式化和本地化选项，具体取决于您对日期时间库的偏好。您可以选择使用Moment.js、 Globalize.js 或 date-fns 本地化器。

简要概述：

版本

0.32.0

执照

麻省理工学院

预计每周下载量

126,292

未包装尺寸

1.13 MB

链接到存储库

react-date-calendar

代码演示/示例

在本简短教程中，我将向大家展示如何安装、显示和获取 DatePicker 中选择的日期的值。

步骤 1

我们需要安装 React，这可以通过 Create-React-App 完成。我写了一篇关于如何安装的文章，链接在这里。

完成上述步骤后，我们需要在终端中导航到我们的文件夹路径，然后运行 npm 命令来安装我们的日期选择器包：

npm i react-big-calendar

步骤 2

import React from "react";
import { Calendar, momentLocalizer } from "react-big-calendar";
import moment from "moment";
import "react-big-calendar/lib/css/react-big-calendar.css";

const ReactBigCalendar = () => {
  moment.locale("en-GB");
  const localizer = momentLocalizer(moment);

  const myEventsList = [
    {
      start: moment().toDate(),
      end: moment().add(1, "days").toDate(),
      title: "Play Nintendo Switch",
    }
  ];

  return (
    <div>
      <h2>React Big Calendar</h2>
      <Calendar
        localizer={localizer}
        events={myEventsList}
      />
    </div>
  );
};
export default ReactBigCalendar;

根据以上内容，我们导入 React 、 react-big-calendar的必要依赖项、 moment.js以及所需的CSS资源。

接下来，我们设置moment.js的结构，然后声明一个名为myEventsList的变量。该变量包含一个对象数组，用于设置在这些日期发生的事件的开始日期、结束日期以及标题。

最后，我们返回 < Calendar /> 组件，其中包含我们传递的日期和事件列表等 props。

结果

4). react-datetime

这个日期选择器既可以用作日期选择器，也可以用作时间选择器，或者同时用作两者。它具有高度可定制性 ，甚至允许编辑日期的毫秒数。

简要概述：

版本

3.0.4

执照

麻省理工学院

预计每周下载量

207,604

未包装尺寸

296 kB

链接到存储库

react-datetime

代码演示/示例

在本简短教程中，我将向大家展示如何安装、显示和获取 DatePicker 中选择的日期的值。

步骤 1

我们需要安装 React，这可以通过 Create-React-App 完成。我写了一篇关于如何安装的文章，链接在这里。

完成上述步骤后，我们需要在终端中导航到我们的文件夹路径，然后运行 npm 命令来安装我们的日期选择器包：

npm i react-datetime

步骤 2

import React from "react";
import "react-datetime/css/react-datetime.css";
import Datetime from "react-datetime";

const ReactDateTime = () => {
  let setDateTime = (e) => {
    const dateValue = e.toDate();
    console.log(dateValue);
    alert(dateValue)
  };
  return (
    <div>
      <h2>React Date Time</h2>
      <Datetime value={setDateTime} input={false} onChange={setDateTime} />
    </div>
  );
};

export default ReactDateTime;

这里我们从react-datetime库导入 React、CSS资源和Datetime。

在我们的函数组件中，我们创建了一个名为setDateTime的变量。该变量接收一个匿名函数，该函数会将日期值显示在浏览器控制台和警告框中。

最后，在我们的返回中，我们创建了 < Datetime /> 组件并为其分配了必要的属性，这使得我们的日期选择器能够正常工作。

结果

3). react-day-picker

这是一个高度可定制、可本地化的日期选择器，支持 ARIA，且无外部依赖项。

简要概述：

版本

7.4.8

执照

麻省理工学院

预计每周下载量

454,148

未包装尺寸

686 kB

链接到存储库

react-day-picker

代码演示/示例

在本简短教程中，我将向大家展示如何安装、显示和获取 DatePicker 中选择的日期的值。

步骤 1

我们需要安装 React，这可以通过 Create-React-App 完成。我写了一篇关于如何安装的文章，链接在这里。

完成上述步骤后，我们需要在终端中导航到我们的文件夹路径，然后运行 npm 命令来安装我们的日期选择器包：

npm i react-day-picker

步骤 2

import React from "react";

import DayPickerInput from "react-day-picker/DayPickerInput";

import "react-day-picker/lib/style.css";

const ReactDayPicker = () => {

  const onDayChangeInput = (day) => {
    console.log(day);
    alert(day)
  };

  return (
    <div>
      <h3>DayPickerInput</h3>
      <DayPickerInput
        placeholder="DD/MM/YYYY"
        format="DD/MM/YYYY"
        onDayChange={onDayChangeInput}
      />
    </div>
  );
};

export default ReactDayPicker;

从上面的代码中，我们导入了React、DayPickerInput和CSS资源。

在我们的函数组件中，我们创建了一个名为onDayChangeInput 的变量。该变量内部是一个匿名函数，它会将日期值记录到控制台，并显示一个警告框。

最后，在我们的返回中，我们将 props 包含在 < DayPickerInput /> 组件中。

结果

2). @material-ui/pickers

这款日期选择器是一款易于使用、可自定义且界面美观的 React 日期时间选择器。它是目前市面上质量最高的日期选择器之一。

它基于 Material-UI，这是世界上最流行的 React 组件库。

简要概述：

版本

3.2.10

执照

麻省理工学院

预计每周下载量

608,421

未包装尺寸

1.49 MB

链接到存储库

material-ui 选择器

代码演示/示例

在本简短教程中，我将向大家展示如何安装、显示和获取 DatePicker 中选择的日期的值。

步骤 1

我们需要安装 React，这可以通过 Create-React-App 完成。我写了一篇关于如何安装的文章，链接在这里。

完成上述步骤后，我们需要在终端中导航到我们的文件夹路径，然后运行 npm 命令来安装我们的日期选择器包：

npm i @material-ui/pickers

步骤 2

import React, { useState } from "react";
import DateFnsUtils from "@date-io/date-fns"; // choose your lib
import {
  DatePicker,
  TimePicker,
  DateTimePicker,
  MuiPickersUtilsProvider,
} from "@material-ui/pickers";

const MaterialUiPickers = () => {
  const [selectedDate, handleDateChange] = useState(new Date());

  const dateChangeValue = (date) => {
    handleDateChange(date);
    const dateValue = date;
    console.log(dateValue);
    alert(dateValue);
  };

  return (
    <div>
      <h2>Material UI Pickers</h2>
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <DatePicker
          variant="static"
          value={selectedDate}
          onChange={dateChangeValue}
        />
        {/\* <br /> \*/}
        <TimePicker value={selectedDate} onChange={dateChangeValue} />
        <DateTimePicker value={selectedDate} onChange={dateChangeValue} />
      </MuiPickersUtilsProvider>
    </div>
  );
};

export default MaterialUiPickers;

上面的代码展示了我们如何导入运行项目所需的依赖项。

然后，在我们的函数组件中，我们创建了一个useState hook，它有一个名为selectedDate 的变量和一个名为handleDateChange 的函数。

接下来，我们创建了一个名为dateChangeValue的变量，它保存一个匿名函数。在这个函数内部，我们做了三件事：

我们在useSate中调用handleDateChange函数，这有助于我们更新页面上显示的日期选择器的更改事件。
接下来，我们会记录并提醒用户点击日期选择器时选择的日期值。

最后，在我们的返回结果中，我们有 `< DatePicker />`、`< TimePicker />` 和 `< DateTimePicker />`。每个组件都接收诸如`value`和`onChange`之类的属性，这些属性都已赋值给相应的变量。

结果

可能存在的错误

您可能会遇到以下错误：找不到模块：无法解析“@date-io/date-fns”

遇到这种情况，您可以运行以下命令来解决问题：

$ npm i --save date-fns@next @date-io/date-fns@1.x

1). React 日期选择器

这是一个简单易用的 React 日期选择器组件，可重复使用。它是网络上最受欢迎的组件包之一，每周下载量达数十万次。

此日期选择器依赖于date-fns 国际化功能来实现其显示组件的本地化。默认情况下，日期选择器将使用全局设置的区域设置，即英语。

简要概述：

版本

3.6.0

执照

麻省理工学院

预计每周下载量

835,537

未包装尺寸

509 kB

链接到存储库

react-datepicker

代码演示/示例

在本简短教程中，我将向大家展示如何安装、显示和获取 DatePicker 中选择的日期的值。

步骤 1

我们需要安装 React，这可以通过 Create-React-App 完成。我写了一篇关于如何安装的文章，链接在这里。

完成上述步骤后，我们需要在终端中导航到我们的文件夹路径，然后运行 npm 命令来安装我们的日期选择器包：

npm i react-datepicker

步骤 2

import React, {useState} from "react";
import DatePicker from "react-datepicker";

import "react-datepicker/dist/react-datepicker.css";

const ReactDatePicker = () => {
  const [startDate, setStartDate] = useState(new Date());

  const getDateValue = (date) => {
    setStartDate(date);
    console.log(date)
    alert(date)
  }
  return (
    <div>
      <h2>React Date Picker</h2>
      <DatePicker
        selected={startDate}
        onChange={getDateValue}
      />
    </div>
  );
};

export default ReactDatePicker;

上面我们导入了所有必要的依赖项。然后在函数组件中，我们创建了一个useState hook。这个 hook 接收一个名为startDate 的变量和一个名为setStartDate 的函数作为参数。

接下来，我们创建一个名为getDateValue 的匿名函数的变量。

在这个变量中，useState中的setStartDate函数会根据页面上的日期变化进行更新。我们还会在控制台中记录并弹出日期值。

最后，在返回中，我们声明了 < DatePicker /> 组件，并为其分配了必要的属性。

结果

结论

以上就是 React 中最受欢迎的日期选择器。日期选择器是前端开发领域非常流行且重要的组件。令人欣喜的是，市面上有很多日期选择器可供选择，我们可以轻松地为项目选择合适的选项。

如果您在实施上述日期选择器时遇到任何困难，请随时在评论区留言。

此外，如果您正在寻找可以贡献代码的开源项目，上述许多日期选择器都为您提供了绝佳的机会。

此外，这里是文章中使用的代码示例的 GitHub 链接。

订阅我的 YouTube频道， 获取更多关于网站开发的教程内容。

文章来源：https://dev.to/desoga/top-10-date-pickers-in-react-9hm

分享

React 中十大日期选择器简介

React 中十大最佳日期选择器

介绍

目录

介绍

10). @ y0c/react-datepicker

简要概述：

版本

执照

预计每周下载量

未包装尺寸

链接到存储库

代码演示/示例

步骤 1

步骤 2

app.js

结果

可能存在的错误

9). Materialui-日期范围选择器

简要概述：

版本

执照

预计每周下载量

未包装尺寸

链接到存储库

代码演示/示例

步骤 1

步骤 2

app.js

结果

8). React-DateTime-Picker

简要概述：

版本

执照

预计每周下载量

未包装尺寸

链接到存储库

代码演示/示例

步骤 1

步骤 2

app.js

结果

7). react-date-range

简要概述：

版本

执照

预计每周下载量

未包装尺寸

链接到存储库

代码演示/示例

步骤 1

步骤 2

app.js

结果

6). react-date-picker

简要概述：

版本

执照

预计每周下载量

未包装尺寸

链接到存储库

代码演示/示例

步骤 1

步骤 2

app.js

结果

5). react-big-calendar

简要概述：

版本

执照

预计每周下载量

未包装尺寸

链接到存储库

代码演示/示例

步骤 1

步骤 2

app.js

结果

4). react-datetime