カレンダー入力の実装方法【React】

Reactでカレンダーを実装する方法を紹介しします。

ライブラリのインストール

カレンダーモジュールを含むライブラリのインストールを行います。

npm install react-datepicker date-fns date-fns-tz

実装方法

下記処理を追加することでカレンダーの実装を行えます。

• カレンダー関連ライブラリをインポート
• カレンダーモジュールを追加
• バックエンド送信時に日本時間に変換

 import React, { useState } from "react";
 // ライブラリをインポート
 import DatePicker, { registerLocale } from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import ja from "date-fns/locale/ja";
 import { format, toZonedTime } from "date-fns-tz";
 
 // 日本ロケールをセット
 registerLocale("ja", ja);
 
 function App() {
   const [startDate, setStartDate] = useState(null);
   const handleSubmit = async () => {
     // 日本時間に変換
     const timeZone = "Asia/Tokyo";
     const formattedStartDate = startDate
       ? format(toZonedTime(startDate, timeZone), "yyyy/MM/dd", { timeZone })
       : null;
 
     const response = await fetch("http://localhost:5000/run-script", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
       body: JSON.stringify({ startDate }),
       body: JSON.stringify({
         startDate: formattedStartDate ? formattedStartDate : null
       }),
     });
     const data = await response.json();
     alert(data.message);
 };

return (
     <div>
       <h1>sample</h1>
       <label>
         開始日:
         <input
           type="text"
           value={startDate}
           onChange={(e) => setStartDate(e.target.value)}
         <DatePicker
           selected={startDate}
           onChange={(date) => setStartDate(date)}
           dateFormat="yyyy/MM/dd" // 日付フォーマット
           placeholderText="開始日を選択"
           shouldCloseOnSelect={true} // 選択時にカレンダーを閉じる
           showYearDropdown // 年選択ドロップダウン
           showMonthDropdown // 月選択ドロップダウン
           dropdownMode="select" // リスト形式ドロップダウン
           locale="ja" // 日本言語設定
         />
       </label>
       <button onClick={handleSubmit}>実行</button>
     </div>
   );
 }