react datepicker
7.5.0
Reactのシンプルで再利用可能なデートピッカーコンポーネント（デモ）
パッケージはNPM経由でインストールできます。
npm install react-datepicker --save
または糸経由：
yarn add react-datepicker
これらの依存関係はパッケージに含まれていないため、ReactとPropTypesを個別にインストールする必要があります。デフォルトのEN-US以外のロケールを使用する必要がある場合は、Date-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の最も基本的な使用は、次のことを説明できます。
< 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モードでデートピッカーを閉じるのに役立つ場合があります
コンポーネントに渡される可能性のある小道具の完全なリストについては、こちらをご覧ください。例はメインのWebサイトに記載されています。
ShowTimeSelect Propを追加して、タイムピッカーを含めることもできます
< DatePicker
selected = { date }
onChange = { handleDateChange }
showTimeSelect
dateFormat = "Pp"
/>時間はデフォルトで30分間隔で表示されます（TimeIntervals Propでデフォルト設定可能）
タイムピッカーの使用方法のその他の例は、メインのウェブサイトで与えられています
日付ピッカーは、ディスプレイコンポーネントをローカライズするために、日付FNS Internationalizationに依存しています。デフォルトでは、日付ピッカーは英語であるグローバルに設定されたロケールを使用します。ロケールを設定するための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まで、このパッケージはempom.jsを使用していました。 V2.0.0を開始すると、ネイティブの日付オブジェクトを使用するdate-fnsの使用に切り替えて、パッケージのサイズを縮小しました。 1.8.0から2.0.0以上に切り替えている場合は、最新の例については、上記の更新された例をご覧ください。
日付ピッカーは、Chrome、Firefox、およびIE10+の最新バージョンと互換性があります。
残念ながら、将来新機能を開発する能力を維持しながら、レガシーブラウザをサポートすることは困難です。 IE9サポートの場合、クラスリストポリフィルが必要であることが知られていますが、これは将来のどの時点でも変化または破損する可能性があります。
mainブランチには、DatePickerコンポーネントの最新バージョンが含まれています。
ローカル開発を開始するには：
yarn linkを実行しますcd docs-site && yarn link react-datepicker実行しますyarn installを実行しますyarn buildを実行しますyarn startを実行します最後のステップでは、http：// localhost：3000の単純なWebサーバーとしてドキュメントアプリを開始します。
yarn testを実行して、テストスイートとリナーを実行できます。コンポーネントの開発を支援するために、基本的な機能をカバーするテストをセットアップしました（ /testsで見つけることができます）。私たちはテストの大ファンですが、これはコンポーネントの小さな部分のみをカバーしています。新しい機能を追加するときは、テストを追加することを強くお勧めします。
セットアップの詳細については、 CONTRIBUTING.mdファイルを参照してください。
例は、Docsフォルダー内でホストされており、DatePickerをロードする単純なアプリで実行されます。新しい例を使用して例を拡張するには、既存の例の1つを単純に複製して、例の一意のプロパティを変更できます。
Copyright（c）2014-2024 Hackerone Inc.および個々の貢献者。 MITライセンスに基づいてライセンスされている場合は、完全なライセンスについてライセンスを参照してください。
