React DatePickerで日付入力を扱いやすくする方法

フロントエンド開発•2025/1/23

React DatePickerとは

Reactでフォームを作るとき、日付入力が必要になることは多いでしょう。テキストボックスに直接入力してもらう方法もありますが、慣れない方にとってはフォーマットを間違えやすいですよね。そこで多くの方が使っているのが React DatePicker というライブラリです。これは、視覚的にわかりやすいカレンダーを表示して、クリックで日付を選択できるようにします。フォームとしての操作性が高まり、ユーザーが扱いやすいのが特徴です。

Reactのアプリケーションで日付を扱うときは、入力フォーマットのチェックやバリデーションも注意点として挙げられます。しかしReact DatePickerなら、日付の形式がカレンダーに準拠するので、タイポによる入力ミスが起こりにくくなります。日付選択が快適になると、誤ったデータが送信されるリスクが減り、アプリケーション側のエラー処理が軽減されるのではないでしょうか。

ここからは、このReact DatePickerの基本的な使い方や、プロジェクトでどう活かすと便利なのかを具体的に紹介したいと思います。皆さんがReactのプロジェクトに導入する際のイメージがわきやすいように、実際のコード例も示します。操作感や連携方法を知ることで、フォーム作成の効率を上げられるかもしれませんね。

日付選択コンポーネントが必要とされる理由

フォームで日付を入力してもらう場面は、予約システムやタスク管理アプリなどに限らず、あらゆる分野のウェブアプリに登場します。直接テキスト入力すると、ユーザーによっては「YYYY/MM/DD」や「MM/DD/YYYY」など、国や文化で異なる形式を混同しがちです。こうした入力形式のばらつきは、アプリのバリデーションを複雑にする原因になることもあります。

React DatePickerを導入すれば、カレンダーUIが表示されるので、設定されたフォーマットの通りに日付が選ばれます。ユーザー側はカレンダーを見ながら正確な日付を選ぶだけなので、入力ミスが減ります。また、必要があれば土日を選べないように制限するなど、より実用的な仕様を備えられる点も役立つのではないでしょうか。

基本的な導入

React DatePickerはnpm経由でインストールします。プロジェクトディレクトリに移動して、以下のコマンドを実行すると導入が完了します。


npm install react-datepicker

インストールしたら、コンポーネントとしてコードで読み込みます。公式ドキュメントにもあるとおり、CSSのインポートも忘れないようにするのがポイントです。以下のように、Reactコンポーネント内でReact DatePickerを使ってみましょう。


import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

function SampleDatePicker() {
  const [selectedDate, setSelectedDate] = useState(null);

  return (
    <div>
      <DatePicker
        selected={selectedDate}
        onChange={(date) => setSelectedDate(date)}
        dateFormat="yyyy/MM/dd"
        placeholderText="日付を選択してください"
      />
      {selectedDate && (
        <p>選択された日付: {selectedDate.toLocaleDateString()}</p>
      )}
    </div>
  );
}

export default SampleDatePicker;

このコードを見てわかるように、状態管理にはReact Hooksの useState を使います。 selected プロパティに選択した日付を渡し、 onChange イベントで日付が変わったときの処理を定義するイメージです。さらに dateFormat の指定を変更することで、表示したい形式にカスタマイズできます。

初心者の方は最初、 selectedDate の初期値や setSelectedDate の挙動に戸惑うかもしれません。でも実装してみると、日付を変更したタイミングで selectedDate が更新され、それがカレンダーや画面上に反映される仕組みになっています。実務でも、このやり方をそのまま応用して、予約日の入力欄を作るなど、いろいろと応用できるのではないでしょうか。

ローカライズや色のカスタマイズ

日付を表示するときに「月/日/年」ではなく「年/月/日」にしたい場合は dateFormat の書き方を変えるだけです。また、曜日を日本語表示にしたいときは、ロケールの設定で対応ができます。これらの設定を行うことで、国内向けや海外向けなど、ターゲットに合わせた日付形式を柔軟に切り替えられます。

コンポーネントの見た目を統一したいケースもありますよね。 React DatePickerではCSSクラスをカスタムしてスタイルを上書きできるため、ボタンやカレンダー全体をプロジェクトのデザインに合わせることができます。ここでは詳細を割愛しますが、独自のCSSを用意し、.react-datepicker-wrapperなどのクラスに対してスタイルを定義すると反映されます。

便利な機能の活用

React DatePickerが単に日付を選ぶだけのコンポーネントだと思っている方もいるかもしれません。実は、以下のような機能が備わっている点が注目ポイントです。

範囲指定ができる (開始日と終了日をまとめて選べる)
特定の日を選択できないように制限できる
時刻の入力も含めた日時選択ができる
ポップアップの表示位置やアニメーション効果をカスタマイズできる

皆さんの作りたいアプリによっては、たとえば「チェックイン日とチェックアウト日を選ぶ」といった場面があるでしょう。そういったときは、2つのDatePickerコンポーネントを連動させて、範囲を指定する実装ができます。以下のサンプルはチェックイン日とチェックアウト日を組み合わせた例です。


import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

function RangePickerExample() {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);

  const handleStartChange = (date) => {
    setStartDate(date);
    if (endDate && date > endDate) {
      setEndDate(null);
    }
  };

  const handleEndChange = (date) => {
    setEndDate(date);
  };

  return (
    <div>
      <h4>チェックイン</h4>
      <DatePicker
        selected={startDate}
        onChange={handleStartChange}
        selectsStart
        startDate={startDate}
        endDate={endDate}
        minDate={new Date()}
        placeholderText="日付を選択"
      />
      <h4>チェックアウト</h4>
      <DatePicker
        selected={endDate}
        onChange={handleEndChange}
        selectsEnd
        startDate={startDate}
        endDate={endDate}
        minDate={startDate}
        placeholderText="日付を選択"
      />
    </div>
  );
}

export default RangePickerExample;

このように、2つの日付が前後する形を意識して startDate と endDate を紐づけるだけで、日付の範囲指定ができるようになります。 minDate を使って「チェックインより前の日付は選べない」などの設定も可能です。実務で宿泊予約システムやレンタルサービスの期間管理を実装する際には、とても便利なやり方ではないでしょうか。

時刻選択や月ビューのカスタマイズ

さらに、日付だけでなく時刻も入力したいときは、 showTimeSelect や showTimeSelectOnly などのプロパティを使います。タイムピッカーが表示されて、分単位や時単位での指定ができるようになります。 24時間表記にしたい場合は、 timeFormat="HH:mm" を設定するなど、比較的直感的に扱えます。

また、月単位で集計するレポートなどを作るときは、月ビューのみを選べるようにすると便利です。 React DatePickerでは、 showMonthYearPicker というプロパティを使えば、「月と年」のみを選択する画面が表示できます。売上レポートの月を指定するようなシーンで役立つかもしれませんね。

実務での活用シーン

日付入力が必要になるケースは多岐にわたります。具体的には、以下のような場面でReact DatePickerが活躍しそうです。

予約フォームで日付と時刻をセットで入力
スケジュール管理アプリで開始日と終了日をセットで入力
eコマースサイトでキャンペーン期間を選択
勤怠管理システムで出社・退社時刻を入力

多くの方が直面する課題として、「フォームに入力してもらうデータが常に正しい形式とは限らない」という問題がありますよね。 React DatePickerを導入することで、カレンダーに従って選ぶだけのシンプルなUIを提供できるようになります。それに加えて、日付だけでなく時間や範囲まで扱えるので、予約やイベント管理といった複雑な要件にも対応しやすいでしょう。

また、チーム開発では、デザイナーや他の開発者と相談しながらUIをカスタマイズする場面があるかもしれません。 React DatePickerはCSSの上書きが柔軟にできるので、カレンダー部分の色やフォントなどをブランドイメージに合わせられます。こうした機能の拡張性が、実務で重宝される理由ではないでしょうか。

React DatePickerを使う際は、バージョン互換にも注意してください。React本体のバージョンとの組み合わせが古いと、一部の機能が正しく動かない場合があります。

よくある注意点

日付の操作を行う場合、タイムゾーンの扱いがややこしくなることがあります。日本時間とUTCを切り替える場面などでは、選択時にずれが発生するかもしれません。アプリケーションの要件に合わせて、タイムゾーンの設定や日時の変換をしっかり行いましょう。

もしサーバーサイドとの連携で日付を送受信するなら、JSON形式でISO8601の文字列を扱うケースがよくあります。 selectedDate.toISOString() のように変換して送ると、サーバーサイドで統一フォーマットとして扱いやすいです。逆にサーバーから日付文字列を受け取ったときは、それをJavaScriptのDateオブジェクトに変換してReact DatePickerに渡すとスムーズでしょう。

まとめ

React DatePickerは、単純な日付選択コンポーネントでありながら、さまざまな機能を備えています。初心者の皆さんがReactでフォームを作成するとき、日付入力だけは複雑に感じるかもしれません。でもReact DatePickerなら、カレンダーUIを標準で提供してくれるので、とても取り組みやすいのではないでしょうか。

また、範囲指定や時刻選択など、予約や管理系のシステムには欠かせない機能もまとめて提供している点が魅力です。チームで開発するときにも、UIのカスタマイズやフォーマットの設定が比較的容易なので、連携がしやすくなります。日付選択における入力ミスを防ぐことで、実務全体の効率化にもつながるかもしれませんね。

ぜひReactのプロジェクトに導入してみて、フォーム入力の快適さを体感してみてください。皆さんのアプリがより扱いやすいものになるきっかけになればうれしいです。