反应取日期器

用于反应的简单且可重复使用的日期拾取器组件( E)演示(中文(简体) )

安装

软件包可以通过 无数字 :

npm install react-datepicker --save

或者通过 线条数字 :

yarn add react-datepicker

您需要分别安装React和propTypes, 因为这些依赖性不包含在软件包中 。 如果您需要使用默认的 en- US 以外的地块, 您也需要从 date- fns 导入到您的工程中( 见下文 localization 一节) 。 以下是在反应视图中如何使用 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)} />
  );
};

配置

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 处理器对关闭在 inline 模式

见 这里 用于完整列出可能传递给组件的道具。 现举例说明: 主要网站。 。 。 .

计时器

您也可以通过添加 showTimeSelection prop 来包括取时器

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

默认时段将每隔30分钟显示( 默认通过时间Intervals prop可配置)

更多如何使用取时器的例子在 主要网站

本地化

摘取日期者依赖 国际化 使其显示组件本地化。 默认情况下,取日期者将使用全球地块设定,即英语. 提供3个帮助方法来设置地块:

• 注册本地 (字符串,对象):从日期-fns上装入导入的地块对象
• 设置 (字符串):将一个已注册的地块设定为所有摘取日期的默认
• 获得默认本地: 返回显示当前设定的默认地块的字符串

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

<DatePicker
  locale="es"
/>

区划可以如下方式变更:

• 全球 - 说吧 setDefaultLocale('es');

兼容性

反应

我们一直试图与最新版本的"回放"保持一致. 我们不能支持所有老版本的React.

最新兼容版本:

• 反应16或更新:反应-取日期器 v2.9.4和更新
• 反应 15.5:反应-取日期器 v2.9.3
• 反应 15.4.1:需要React-datepicker v0.40.0,新手不会工作(因为反应-点击出局依赖)
• React 0.14 或 更新: 全部以上 React-date pickers v0.13.0
• 反应0.13:反应-取日期器 v0.13.0
• 预反应0.13: 反应-取日期器 v0.6.2

时刻.js

直到1.8.0版本,这个包一直使用Moment.js. 从v2.0.0开始,我们切换到使用 date-fns,它使用本地 Date 对象来缩小包的大小。 如果你从1.8.0改为2.0.0或更高,请参见上文更新的例子: 实例网站 用于更新实例.

浏览器支持

取枣器与Chrome,Firefox,和IE10+等最新版本相兼容.

不幸的是,在维持我们今后开发新功能的能力的同时,很难支持遗留的浏览器. 对于IE9支持,众所周知 类列表多填充 但它可能在未来的任何时刻改变或中断.

地方发展

这个 main 分支包含 Datepicker 组件的最新版本.

为开始地方发展:

1. 运行 yarn link 从工程根
2. 运行 cd docs-site && yarn link react-datepicker
3. 运行 yarn install 从工程根
4. 运行 yarn build 从工程根
5. 运行 yarn start 从工程根

最后一步在http://localhost:30.

你们可以跑 yarn test 执行测试套件和linters。 为了帮助您开发组件,我们设置了一些涵盖基本功能的测试(可参见: /tests) (中文(简体) ). 虽然我们是测试的大粉丝, 我们强烈建议您在添加新功能时加入测试.

请参考 CONTRIBUTING.md 关于设置的更多细节.

实例

实例在文件文件夹内托管, 并运行在装入 Datepicker 的简单应用程序中 。 要用新的示例来扩展示例,您可以简单地重复现有的示例之一,并改变您示例的独特属性.

无障碍

键盘支持

• 左边:移动到前一天.
• 对:移至次日.
• 上来: 移动到前一周.
• 下来:移动到下个礼拜.
• 跳跃:去上个月.
• 密码:去下个月.
• 内容: 迁至上年.
• 结束:移去来年.
• 输入/ Esc/标签: 关闭日历. (Enter & Esc 呼叫防止过失)

为取月者

• 左边:去上个月.
• 对:去下个月.
• 输入: 选择日期并关闭日历

许可证

版权 (c) 2014-2023 HackerOne Inc. 及个人贡献. 持有麻省理工学院许可证,见 自由主义 完全许可.