Reactでdatepickerを使用する実装例

React

Reactでdatepickerを使用する実装例

Reactでdatepickerを使用するには、react-datepickerライブラリを使うのが一般的です。
以下に実装例を示します。

まず、ライブラリのインストール方法です（初期インストールの説明は省略します）:

インストール手順

npmの場合

npm install react-datepicker
npm install date-fns

yarnの場合

yarn add react-datepicker
yarn add date-fns

実装例

以下に、react-datepickerを使用した簡単な日付ピッカーの例を示します。

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

const MyDatePicker = () => {
  const [selectedDate, setSelectedDate] = useState(null);

  const handleChange = (date) => {
    setSelectedDate(date);
  };

  const handleError = (error) => {
    console.error("エラーが発生しました:", error);
  };

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

export default MyDatePicker;

ポイント

  • react-datepickerコンポーネントを使用して、日付選択ウィジェットを表示しています。
  • selectedプロパティで現在選択されている日付を指定し、onChangeプロパティで日付が変更されたときに呼び出されるハンドラを設定しています。
  • handleError関数を用意してエラーハンドリングを行っていますが、必要に応じて実装を変更してください。

この実装例を参考にして、日付ピッカーをReactプロジェクトに統合してください。