react datepicker

反應日期選擇器

一個簡單且可重複使用的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種助手方法來設置該語言環境：

• registerLocale （字符串，對象）：從date-fns加載導入的本地對象
• setDefaultLocale （字符串）：將註冊的語言環境設置為所有datepicker實例的默認設置
• getDefaultLocale ：返回一個字符串，顯示當前設置的默認環境

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

< DatePicker
  locale = "es"
/ >

可以通過以下方式更改環境：

• 全球- setDefaultLocale('es');

相容性

反應

我們一直在嘗試與最新版本的React保持兼容。我們不能支持所有舊版本的React。

最新兼容版本：

• React 16或更新：React-Datepicker v2.9.4和更新
• React 15.5：React-DatePicker v2.9.3
• REACT 15.4.1：需求React-DatePicker V0.40.0，新較新無法正常工作（由於反應依賴性依賴關係）
• 反應0.14或較新：所有上述反應datepicker v0.13.0
• 反應0.13：react-datepicker v0.13.0
• pre react 0.13：react-datepicker v0.6.2

時刻

直到版本1.8.0，此軟件包使用Moment.JS。從v2.0.0開始，我們切換到使用使用本機日期對象的date-fns來減少軟件包的大小。如果您要從1.8.0切換到2.0.0或更高版本，請參閱上面的更新示例，查看示例網站以獲取最新示例。

瀏覽器支持

日期選擇器與Chrome，Firefox和IE10+的最新版本兼容。

不幸的是，在保持未來開發新功能的能力的同時，很難支持傳統瀏覽器。對於IE9的支持，眾所周知，需要階級的多填充，但這可能在將來任何時候都會改變或破裂。

地方發展

main分支包含最新版本的datePicker組件。

開始本地發展：

1. 從項目根運行yarn link
2. 運行cd docs-site && yarn link react-datepicker
3. 從項目root運行yarn install
4. 從項目根開始運行yarn build
5. 從項目根yarn start

最後一步在http：// localhost：3000上以簡單的Web服務器開始文檔應用程序。

您可以運行yarn test以執行測試套件和襯裡。為了幫助您開發組件，我們已經設置了一些涵蓋基本功能的測試（可以在/tests中找到）。即使我們是測試的忠實擁護者，但這僅涵蓋了一小部分組件。我們強烈建議您在添加新功能時添加測試。

有關設置的更多詳細信息，請參考CONTRIBUTING.md文件。

例子

示例託管在DOCS文件夾中，並在加載DatePicker的簡單應用程序中運行。為了通過一個新示例擴展示例，您可以簡單地複制現有示例之一，然後更改示例的唯一屬性。

可訪問性

鍵盤支持

• 左：移至前一天。
• 右：移至第二天。
• 向上：移至上週。
• 下：搬到下週。
• PGUP ：移至上個月。
• Shift+PGUP ：移至上一年的同一天和月份。如果這一天不存在，則將重點放在一個月的最後一天。
• PGD​​N ：搬到下個月。
• Shift+PGDN ：移至明年的同一天和月份。如果這一天不存在，則將重點放在一個月的最後一天。
• 主頁：搬到本週的第一天（例如星期日）。
• 結束：移至本週的最後一天（例如星期六）。
• 輸入/ESC/TAB ：關閉日曆。 （Enter＆ESC呼叫預防默認）

對於一個月的選擇器

• 左：移至上個月。
• 右：搬到下個月。
• 輸入：選擇日期並關閉日曆

執照

版權（C）2014-2024 Hackerone Inc.和個人貢獻者。根據MIT許可證獲得許可，請參閱許可證以獲取完整許可。