React.js アプリに日付ピッカーを追加する方法

React.js アプリに日付ピッカーを追加することは、使いやすさを向上させる優れた方法です。日付ピッカーを使用すると、ユーザーは日付を手動で入力するのではなく、フォーム フィールドでカレンダーから直接日付を選択できます。これにより、アプリのユーザー エクスペリエンスが大幅に向上し、ユーザーが必要な日付を簡単に選択できるようになります。

ネイティブ機能または外部ライブラリを使用して、React.js アプリに日付ピッカーを追加できます。

日付ピッカーとは?

日付ピッカーは、ユーザーがカレンダーから日付を選択できるようにするインターフェイス要素です。

通常、横にカレンダー アイコンが表示されたテキスト ボックスとして表示され、クリックするとカレンダーが開き、ユーザーは日付を選択できます。ユーザーは、アプリケーションの構成に応じて、日付を入力するか、カレンダーから選択できます。

React.js アプリに日付ピッカーを追加する方法

React.js アプリケーションに日付ピッカーを追加するには、いくつかの方法があります。これらには、ネイティブ機能の使用とサードパーティ ライブラリの統合が含まれます。日付ピッカーに機能を追加することもできます。

組み込み機能の使用

React フックとネイティブの HTML5 日付入力タイプを使用して、アプリケーションに日付ピッカーを追加できます。これは、追加のライブラリやコードを必要としないため、日付ピッカーを追加する簡単な方法です。ただし、デフォルトのスタイリングや基本機能の制限など、いくつかの欠点があります。

import React, { useRef, useState } from 'react';


const DatePicker = () => {
const [date, setDate] = useState('');
const dateInputRef = useRef(null);

export default DatePicker;

上記のコードは、ネイティブの HTML5 日付入力タイプを使用して日付ピッカーを作成します。useState フックを使用して選択した日付を追跡し、useRef フックを使用して日付入力フィールドへの参照を取得します。次に、ユーザーが日付を選択したときに日付の状態を更新する onChange ハンドラーを作成します。

組み込み機能を使用するデメリット

ネイティブの HTML5 日付入力タイプを使用する主な欠点は、追加機能やカスタマイズが提供されないことです。デフォルト機能の小さなセットに限定されており、日付範囲の選択などの追加オプションは提供されていません.

入力フィールドにスタイルを追加することはできますが、機能を追加することはできません。

react-datepicker ライブラリの使用

react-datepicker ライブラリは、React.js アプリに日付ピッカーを追加するために広く使用されている人気のあるライブラリです。日付の範囲を選択する機能、スタイルをカスタマイズする機能、追加機能を追加する機能など、幅広いオプションと機能を提供します。

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';


const DatePickerExample = () => {
const [startDate, setStartDate] = useState(new Date());

export default DatePickerExample;

このコードは、react-datepicker ライブラリを使用して日付ピッカーを作成します。useState フックを使用して、選択した日付を追跡し、それを DatePicker コンポーネントに渡します。これにより、選択した日付で日付ピッカーが表示されます。

react-date-picker ライブラリの使用

react-date-picker ライブラリは、React.js アプリに日付ピッカーを追加するためのもう 1 つの人気のあるライブラリです。これは、日付の範囲を選択する機能、スタイルをカスタマイズする機能、追加機能を追加する機能など、react-datepicker ライブラリと同様の機能とオプションを提供します。追加機能を備えたより堅牢な日付ピッカーを探している場合に適しています。

import React, { useState } from 'react';
import DatePicker from 'react-date-picker';


const DatePickerExample = () => {
const [startDate, setStartDate] = useState(new Date());

export default DatePickerExample;

このコードは、react-date-picker ライブラリを使用して日付ピッカーを作成します。前のコードと似ていますが、react-datepicker の代わりに react-date-picker ライブラリを使用しています。このライブラリは、日付ピッカー カレンダーにさまざまなスタイルと機能を提供します。CSS または Tailwind などの CSS フレームワークを使用してカスタム スタイルを追加することもできます。

追加機能の追加

React.js アプリに日付ピッカーを追加したら、機能やオプションを追加して、より使いやすく直感的にすることができます。たとえば、日付の範囲を選択する機能を追加したり、スタイルをカスタマイズしたり、時間の選択などの機能を追加したりできます。カスタム検証を追加して、ユーザーが有効な日付を選択したことを確認することもできます。

import React, { useState } from 'react';
import DatePicker from 'react-date-picker';


const DatePickerExample = () => {
const [startDate, setStartDate] = useState(new Date());
const [endDate, setEndDate] = useState(new Date());

export default DatePickerExample;

このコードは、react-date-picker ライブラリを使用して日付ピッカーを作成します。useState フックを使用して開始日と終了日を追跡し、それらを DatePicker コンポーネントに渡します。これにより、2 つの日付ピッカーがレンダリングされます。1 つは開始日を選択するためのもので、もう 1 つは終了日を選択するためのものです。

カスタム検証を追加して、ユーザーが有効な日付を選択したことを確認することもできます。これを行うには、onChange イベント ハンドラーを使用して有効な日付をチェックし、ユーザーが無効な日付を選択した場合はエラー メッセージを表示します。

日付ピッカーでユーザー エンゲージメントを改善する

日付ピッカーを使用すると、ユーザーは信頼性を高めて日付をより迅速に選択できます。これにより、ユーザーは必要な日付を選択しやすくなり、アプリケーションを使用する可能性が高くなります。さらに、アプリケーションのルック アンド フィールに合わせて日付ピッカーをカスタマイズして、より使いやすく直感的なものにすることができます。

日付ピッカーとフォームに検証を追加して、ユーザーが有効な日付を入力できるようにすることもできます。これにより、アプリケーションでエラーを引き起こす可能性のある無効な日付をユーザーが入力するのを防ぐことができます。