@abdubek/react-datepicker 中文文档教程

Question

React Date Picker

用于 React 的简单且可重复使用的日期选择器组件（演示< /a>)

Installation

可以通过 npm：

npm install react-datepicker --save

或者通过 yarn：

yarn add react-datepicker

你'您需要单独安装 React 和 PropTypes，因为这些依赖项未包含在包中。 如果您需要使用默认 en-US 以外的区域设置，您还需要将其从 date-fns 导入到您的项目中（请参阅下面的本地化部分）。 下面是一个如何在 React 视图中使用 Datepicker 的简单示例。 您还需要从这个包中获取 CSS 文件（或提供您自己的文件）。 下面的示例显示了如果您的构建系统支持需要 CSS 文件（Webpack 是一个支持），如何从这个包中包含 CSS。

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

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

// CSS Modules, react-datepicker-cssmodules.css
// import 'react-datepicker/dist/react-datepicker-cssmodules.css';

const Example = () => {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />
  );
};

Configuration

DatePicker 的最基本用法可以描述为：

<DatePicker selected={startdate} onChange={(date) => setStartDate(date)} />

您可以使用 onSelect 事件处理程序，它会在每次选择某个日历日期时触发

<DatePicker
  selected={date}
  onSelect={handleDateSelect} //when day is clicked
  onChange={handleDateChange} //only when value has changed
/>

onClickOutside 处理程序可能对关闭 datepicker 很有用在 inline 模式下

查看此处获取完整列表可以传递给组件的道具。 主网站 上提供了示例。

Time picker

您还可以通过添加 showTimeSelect 属性来包含时间选择器

<DatePicker
  selected={date}
  onChange={handleDateChange}
  showTimeSelect
  dateFormat="Pp"
/>

默认情况下，时间将以 30 分钟的间隔显示（默认可通过 timeIntervals 属性进行配置）

有关如何使用时间选择器的更多示例在 主站

Localization

日期选择器依赖date-fns 国际化 对其显示组件进行本地化。 默认情况下，日期选择器将使用全局设置的语言环境，即英语。 提供了 3 个设置语言环境的辅助方法：

• registerLocale (string, object): loads an imported locale object from date-fns
• setDefaultLocale (string): sets a registered locale as the default for all datepicker instances
• getDefaultLocale: returns a string showing the currently set default locale

import { registerLocale, setDefaultLocale } from  "react-datepicker";
import es from 'date-fns/locale/es';
registerLocale('es', es)

<DatePicker
  locale="es"
/>

可以通过以下方式更改语言环境：

• Globally - setDefaultLocale('es');

Compatibility

React

我们一直在努力与最新版本的 React 保持兼容。 我们不能支持所有旧版本的 React。

最新兼容版本：

• React 16 or newer: React-datepicker v2.9.4 and newer
• React 15.5: React-datepicker v2.9.3
• React 15.4.1: needs React-datepicker v0.40.0, newer won't work (due to react-onclickoutside dependencies)
• React 0.14 or newer: All above React-datepicker v0.13.0
• React 0.13: React-datepicker v0.13.0
• pre React 0.13: React-datepicker v0.6.2

Moment.js

直到版本 1.8.0，这个包使用的是 Moment.js。 从 v2.0.0 开始，我们改用 date-fns，它使用原生 Date 对象，以减小包的大小。 如果您要从 1.8.0 切换到 2.0.0 或更高版本，请查看上面更新的示例，查看示例站点以获取最新信息例子。

Browser Support

日期选择器与最新版本的 Chrome、Firefox 和 IE10+ 兼容。

不幸的是，很难在支持遗留浏览器的同时保持我们在未来开发新功能的能力。 对于 IE9 支持，已知需要 classlist polyfill，但这可能会随时更改或中断未来。

Local Development

master 分支包含最新版本的 Datepicker 组件。

开始本地开发：

1. yarn install
2. yarn build-dev
3. yarn start

最后一步在 http://localhost:3000 上将文档应用程序作为一个简单的网络服务器启动。

您可以运行 yarn test 来执行测试套件和 linter。 为了帮助您开发组件，我们设置了一些涵盖基本功能的测试（可在 /tests 中找到）。 尽管我们是测试的忠实拥护者，但这只涵盖了组件的一小部分。 我们强烈建议您在添加新功能时添加测试。

The examples

这些示例托管在 docs 文件夹中，并在加载 Datepicker 的简单应用程序中运行。 要使用新示例扩展示例，您可以简单地复制现有示例之一并更改示例的独特属性。

Accessibility

Keyboard support

• Left: Move to the previous day.
• Right: Move to the next day.
• Up: Move to the previous week.
• Down: Move to the next week.
• PgUp: Move to the previous month.
• PgDn: Move to the next month.
• Home: Move to the previous year.
• End: Move to the next year.
• Enter/Esc/Tab: close the calendar. (Enter & Esc calls preventDefault)

For month picker

• Left: Move to the previous month.
• Right: Move to the next month.
• Enter: Select date and close the calendar

License

版权所有 (c) 2014-2021 HackerOne Inc. 和个人贡献者。 根据 MIT 许可证获得许可，请参阅 LICENSE 以获取完整许可证。