React,Javaアプリケーションでカレンダー機能実装

最初に

今回の記事はReact + SpringBootアプリ　簡易まとめの記事の続きで旅行予約管理アプリケーションのカレンダー機能実装についてまとめようと思います。
カレンダー機能実装にはReactのReact Datepickerを使用し、こちらのサイトを参考にして実装しました。

本記事の完成画面

1.　サンプルコード

import axios from "axios";
import React, { useEffect, useState } from "react";
import ReactDatePicker from "react-datepicker";
import { useParams } from "react-router-dom";

export default function ViewUser() {

  const Today = new Date();
  const [startDate, setStartDate] = useState(Today);

  const NextDay = new Date(startDate);
  NextDay.setDate(NextDay.getDate() + 1);
  const [endDate, setEndDate] = useState(NextDay);

  useEffect(() => {
    loadUser()
  }, [])

  const loadUser = async () => {
    await axios.get(`http://localhost:8080/booking`)
  }

  const onSubmit = async (e) => {
    e.preventDefault();
    await axios.post(`http://localhost:8080/booking/${startDate}/${endDate}`)
  }

  return (
    <div className='container'>
      <div className='row'>
        <div className='col-md-6 offset-md-3 border rounded p-4 mt-2 shadow'>
          <h2 className='text-center m-4'>確認</h2>
          <form onSubmit={(e) => onSubmit(e)}>
            <div className='mb-3'>
              <div class="row justify-content-around m-3">
                <div class="col-4">
                  <label htmlFor="StartDay" className='form-label'>
                    Start Day
                  </label>
                  <ReactDatePicker
                    selected={startDate}
                    onChange={(date) => setStartDate(date)}
                    minDate={Today}
                    dateFormat="yyyy/M/dd"
                  />
                </div>
                <div class="col-4">
                  <label htmlFor="EndDay" className='form-label'>
                    End Day
                  </label>
                  <ReactDatePicker
                    selected={endDate}
                    onChange={(date) => setEndDate(date)}
                    minDate={NextDay}
                    dateFormat="yyyy/M/dd"
                  />
                </div>
              </div>
            </div>
            <button className='btn btn-outline-success mx-2' >Booking</button>
          </form >
        </div>
      </div>
    </div>
  )
}

2.　コード説明

カレンダーの表示自体は下記のコードで行っています

<ReactDatePicker
    selected={startDate}
    onChange={(date) => setStartDate(date)}
    minDate={Today}
    dateFormat="yyyy/M/dd"
 />

<ReactDatePicker
    selected={endDate}
    onChange={(date) => setStartDate(date)}
    minDate={NextDay}
    dateFormat="yyyy/M/dd"
 />

上から順に説明していきます
selected={}は文字通り選択した値を保持する、初期値を表示する役割を持っています。

  const Today = new Date();
  const [startDate, setStartDate] = useState(Today);

  const NextDay = new Date(startDate);
  NextDay.setDate(NextDay.getDate() + 1);
  const [endDate, setEndDate] = useState(NextDay);

上記のconst Today = new Date();で操作当日の日付を扱う変数Todayを定義します。
const [startDate, setStartDate] = useState(Today);でTodayを初期値としたstartDateを定義します。selected={startDate}とすることで操作日を初期値として表示できるということです。
変数NextDayにはstartDateに+1日をすることでstartDateで選択した次の日付を定義することができます。
onChange={(date) => setStartDate(date)}を使用することで選択した値を非同期で画面に反映（表示）することができます
minDate={}は文字通り最小値です。endDateの方でminDate={NextDay}とすることでendDateの方ではstartDateで選択した日付の次の日付からしか選択できないということになります。

dateFormat="yyyy/M/dd"は表示フォーマットです。
今回はstartDate、endDateはともにパラメーター（http://localhost:8080/booking/${startDate}/${endDate}）としてバック側に渡しています。

3.　最後に

分かりずらい点、間違っている点あると思いますが参考してもらえれば幸いです。
是非、上記で説明したコード、こちらのサイトを参考にして自分好みのカレンダー機能を実装してみてください！