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

# 最初に
今回の記事は[React + SpringBootアプリ　簡易まとめ](https://qiita.com/Sesoniso/items/3c1beb243a093d80e247)の記事の続きで旅行予約管理アプリケーションの**カレンダー機能実装**についてまとめようと思います。
カレンダー機能実装にはReactのReact Datepickerを使用し、[こちら](https://reactdatepicker.com/)のサイトを参考にして実装しました。

本記事の完成画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2645309/0a5cbf77-c6f0-9874-3d4e-6b41fae09963.png)

# 1.　サンプルコード
```js
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.　コード説明
カレンダーの表示自体は下記のコードで行っています
```js
<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={}`は文字通り選択した値を保持する、初期値を表示する役割を持っています。
```js
  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`で選択した日付の次の日付からしか選択できないということになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2645309/6ed7d9d8-eff9-e5eb-c2d0-12e001dee0a8.png)
`dateFormat="yyyy/M/dd"`は表示フォーマットです。
今回は`startDate`、`endDate`はともにパラメーター（`http://localhost:8080/booking/${startDate}/${endDate}`）としてバック側に渡しています。


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