react datepicker
7.5.0
一个简单且可重复使用的datepicker组件（演示）
该软件包可以通过NPM安装：
npm install react-datepicker --save
或通过纱线：
yarn add react-datepicker
您需要单独安装React和Proptypes，因为这些依赖项未包含在软件包中。如果您需要使用除默认的EN-US以外的其他语言环境，则还需要从日期 - FNS将其导入项目（请参见下面的本地化部分）。以下是如何在React视图中使用DatePicker的简单示例。您还需要从此软件包中需要CSS文件（或提供您自己的）。下面的示例显示了如何在此软件包中包含CSS，如果您的构建系统支持需要CSS文件（WebPack是一个）。
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 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模式下关闭datepicker可能很有用
请参阅此处，以获取可能传递给组件的道具的完整列表。示例在主要网站上举例。
您还可以通过添加ShowTimesElect Prop来包括时间选择器
< DatePicker
selected = { date }
onChange = { handleDateChange }
showTimeSelect
dateFormat = "Pp"
/>默认情况下将以30分钟的间隔显示时间（默认可通过TimeIntervals Prop配置）
主网站上提供了更多有关如何使用时间选择器的示例
日期选择器依靠日期-FNS国际化来定位其显示组件。默认情况下，挑选器将使用全球设置（即英语）使用。提供的是3种助手方法来设置该语言环境：
import { registerLocale , setDefaultLocale } from "react-datepicker" ;
import { es } from 'date-fns/locale/es' ;
registerLocale ( 'es' , es )
< DatePicker
locale = "es"
/ >可以通过以下方式更改环境：
setDefaultLocale('es'); 我们一直在尝试与最新版本的React保持兼容。我们不能支持所有旧版本的React。
最新兼容版本：
直到版本1.8.0，此软件包使用Moment.JS。从v2.0.0开始，我们切换到使用使用本机日期对象的date-fns来减少软件包的大小。如果您要从1.8.0切换到2.0.0或更高版本，请参阅上面的更新示例，查看示例网站以获取最新示例。
日期选择器与Chrome，Firefox和IE10+的最新版本兼容。
不幸的是，在保持未来开发新功能的能力的同时，很难支持传统浏览器。对于IE9的支持，众所周知，需要阶级的多填充，但这可能在将来任何时候都会改变或破裂。
main分支包含最新版本的datePicker组件。
开始本地发展：
yarn linkcd docs-site && yarn link react-datepickeryarn installyarn buildyarn start最后一步在http：// localhost：3000上以简单的Web服务器开始文档应用程序。
您可以运行yarn test以执行测试套件和衬里。为了帮助您开发组件，我们已经设置了一些涵盖基本功能的测试（可以在/tests中找到）。即使我们是测试的忠实拥护者，但这仅涵盖了一小部分组件。我们强烈建议您在添加新功能时添加测试。
有关设置的更多详细信息，请参考CONTRIBUTING.md文件。
示例托管在DOCS文件夹中，并在加载DatePicker的简单应用程序中运行。为了通过一个新示例扩展示例，您可以简单地复制现有示例之一，然后更改示例的唯一属性。
版权（C）2014-2024 Hackerone Inc.和个人贡献者。根据MIT许可证获得许可，请参阅许可证以获取完整许可。
