導入
さまざまなフォーラムや Web サイトで、生年月日を入力したり、何らかの理由で予定の日付を選択したりする必要があり、カレンダーのようなアイコンが目の前に表示される場面によく遭遇します。それはどこからどのようにして現れるのでしょうか？それは、私たちが希望する日付を選択できるように、スマートに認識して提示してくれる、具体的で動的に機能するカレンダーでなければなりません。ここで React Date Picker が登場します。このチュートリアルでは、このようなすべてのメソッドをゼロから上級レベルまで、React での実装方法とカスタマイズ方法について学びます。議論を進めましょう。
の 反応する Date Picker は、カレンダー ダイアログ形式を使用して日付を表示するために使用される、便利で豊富なコンポーネントです。最近では、通常、多くの日付ピッカー オプションが利用できます。それらはすべて、異なる技術的側面とアプリケーションを持つことができます。このチュートリアルでは、特に React Date Picker を扱います。そのためには、時刻と日付を表示するパッケージが必要です。理解を深めるために、React Date Picker をよりよく理解するのに役立つアプリケーションを作成します。ただし、その前に、以下の手順に従ってインストールしましょう。
インストール
React アプリケーションに Date Picker をインストールするには、システムに Node.js がプリインストールされている必要があります。ノード モジュールを常に保持することは重要ではありませんが、すべての依存関係が効率的に提供されるように、ノード モジュールをダウンロードすることを強くお勧めします。したがって、React Date Picker をインストールするコマンドは以下のとおりです。
パッケージは次の方法でインストールできます。 npm:
アルゴリズム深さ優先検索
npm install react-datepicker --save
または経由 糸：
yarn add react-datepicker
これらの依存関係がなければ React Date Picker を構築することができないため、React とその Proptype を個別にインストールする必要が生じる場合があります。また、日付ピッカーの見た目を良くするために、外部パッケージの CSS を使用する必要がある場合があります。アプリケーションを開始するには、React Date ピッカーをメイン ファイルにインポートし、React ビューを通じてチェックし続ける必要があります。
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 ( setStartDate(date)} /> ); }; React Datepicker の例
システムがすべてのインストール要件と依存関係を備えて構成されていると仮定して、React アプリケーションを最初から作成する方法を学びます。この実装は完全に React datepicker のアプリケーションに基づいています。
上記の説明では、React と PropTypes の依存関係がパッケージ自体に組み込まれていないため、これらを個別にインストールしたことを前提としています。アプリケーションの構築方法に進むには、以下の手順に従う必要があります。
npx create-react-app react-datepicker-app
コマンドでプロジェクトフォルダ内を移動します。
cd react-datepicker-app
React アプリを起動します。
階乗Java
npm start
ノード エンジンが開始されたら、ローカルホストのポート番号 3000 を介してアプリケーションをチェックできます。また、React Date Picker の重要なコンポーネントがファイルにインポートされるように、以下に示すコード スニペットを app.js ファイルに含める必要があります。
// app.js import React, { Component } from 'react'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; import 'bootstrap/dist/css/bootstrap.min.css'; class App extends Component { constructor (props) { super(props) this.state = { startDate: new Date() }; this.handleChange = this.handleChange.bind(this); this.onFormSubmit = this.onFormSubmit.bind(this); } handleChange(date) { this.setState({ startDate: date }) } onFormSubmit(e) { e.preventDefault(); console.log(this.state.startDate) } render() { return ( Show Date ); } } export default App; アプリケーションは次のようになります。
上記のコード化されたサンプルでは、最初に次のパッケージをインポートしました。 日付ピッカー そして ブートストラップ React テンプレート内。次に、それをバインドするように定義しました。 ハンドル交換 イベント カレンダーでコンポーネントを送信します。これらのイベントは、ユーザーが Datepicker の入力値を送信または変更すると、自動的にトリガーされます。その後、Datepicker フォームの状態を新しい値で初期化しました。 日付（） コンストラクター内のオブジェクト。最後に、以下のディレクティブを使用して Datepicker を開始し、いくつかのプロパティを追加しました。
出力はカレンダー中心の日付ピッカー形式で視覚化できます。上記の Datepicker は、カスタマイズされたプロパティを上記の React アプリケーション コンポーネントに追加します。これにより、次の形式で日付を選択できるようになります。 何か月、数日、 そして 年 。
さらに、日付ピッカーをカスタマイズするには、コンポーネントに色を付けたり、日付を取得する関数をスマートに適用したりするなど、他にもさまざまな方法があります。 app.js ファイルに関連する HTML および CSS コンポーネントがある場合は、それらを簡単にカスタマイズすることもできます。
日付ピッカーのローカライズ
これから学習するもう 1 つの例は、Datepicker のローカライズです。私たちが作成しようとしている Date Picker は、date-fns の国際化に大きく依存しています。これは、表示される要素をローカライズするために使用されるためです。デフォルトの en-US 以外のロケールを使用する必要がある場合は、date-fns からプロジェクトにロケールをインポートする必要がある場合があります。
また、デフォルトのロケールは英語で、ロケールを設定する 3 つの方法で構成されます。
ローカルに登録する (文字列、オブジェクト): date-fns からインポートされたロケール オブジェクトを読み込みます。
デフォルトのロケールを設定する (文字列): 登録されたロケールをすべての日付ピッカー インスタンスのデフォルトとして設定します。
Javaのtostringメソッド
getDefaultLocale: 現在設定されているデフォルトのロケールを示す文字列を返します。
以下のコード スニペットを使用して、これらのサービスをカレンダー ビューのロケールにインポートできます。
import { registerLocale, setDefaultLocale } from 'react-datepicker'; import es from 'date-fns/locale/es'; registerLocale('es', es) これらのロケール サービスを app.js ファイルにインポートして保存すると、アプリケーションは次のようになります。
別の例では、ロケールを変更するには、主にロケール コードを変更するか、コード レビューをサポートできるように date-fns の国際化を使用する必要があります。
setDefaultLocale('es')
Datepicker でカレンダーの日付範囲を設定します。
を使用して範囲機能を実装する方法を学びます。 最小日付 そして maxDate プロパティ このステップでは。そのために、 addDays AP 私はから 日付-FNS ライブラリを React コンポーネントの先頭に追加します。割り当てられた日付に特定の日数を追加して範囲を設定します。
import addDays from 'date-fns/addDays'
の addDays() このメソッドは通常、次の 2 つのパラメータを取ります。
日付： 更新する必要がある日付。
文字列配列Javaの場合
額： かなりの日数を含める必要がありました。
React カレンダーでは、現在から次の 7 日間までの日付範囲を簡単に設定できます。これは実装してみると分かりますが、 分日 そして 最大日付 以下に示すコード例のメソッド。
render() { return ( Show Date ); } 上記のすべての手順を実装した後のアプリケーションの完全なコード スニペットを以下に示します。
import React, { Component } from 'react'; import DatePicker from 'react-datepicker'; import addDays from 'date-fns/addDays' import 'react-datepicker/dist/react-datepicker.css'; import 'bootstrap/dist/css/bootstrap.min.css'; class App extends Component { constructor (props) { super(props) this.state = { startDate: new Date() }; this.handleChange = this.handleChange.bind(this); this.onFormSubmit = this.onFormSubmit.bind(this); } handleChange(date) { this.setState({ startDate: date }) } onFormSubmit(e) { e.preventDefault(); console.log(this.state.startDate) } render() { return ( Show Date ); } } export default App; 上記のサンプル スニペットでは、 分日 チェックイン コンポーネントとして使用され、ユーザーは今日より前の日付のみを選択できます。チェックアウト コンポーネントの日付値を使用しました。これは、ユーザーがチェックイン日より前の日付を選択できないことを意味します。
次のステップでは、状態の値を保存し、各ハンドルがどのように動作するかを定義します。主なアイデアは、それぞれの状態を作成するだけで実装することです。 チェックイン そして チェックアウト 定義された値で日付を取得し、そこにデータを保存します。唯一の違いは、 分日 チェックアウト コンポーネントのメソッド。これはチェックイン コンポーネントにのみ依存します。したがって、前後ではなくすべての値が設定されるようにすることで、日付を簡単に選択してチェックアウトを定義できるようになりました。
結論
このチュートリアルでは、ネイティブの代替として簡単に使用できるカスタム React Datepicker コンポーネントを構築するための簡単なステップバイステップ ガイドを実行できました。 HTML5 日付ピッカー 入力要素。 React コンポーネントのレンダリングは初心者にとって複雑に見える可能性があるため、React アプリケーションを優先的にセットアップする方法を学習しました。依存関係のセットアップは常に初心者に好まれます。また、アプリケーションで Datepicker のコンポーネントを使用するという明確な概念を確立するために、さまざまな例も見つけました。また、カレンダー上の特定の期間に日付が選択された場合に日付選択プロセスで問題が発生しないように、日付ピッカーをローカライズするプロセスについても学びました。
このチュートリアルで作成したカスタム datepicker は期待どおりに機能しますが、datepicker 要素の高度な要件をすべて満たしているわけではありません。小道具を介して最大値と最小値を実装したり、入力タイプをテキストから日付に切り替えたり、より優れたアクセシビリティの改善を確立するなど、さらなる改善を行うことができます。また、Bootstrap パッケージをインポートし、カスタム スタイルとホバーリングのプロパティを追加して見栄えを良くすることで、このチュートリアルで実装した datepicker の設計メソッドを開発することもできます。