Why not login to Qiita and try out its useful features?

We'll deliver articles that match you.

You can read useful information later.

4
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Posted at

最初に

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

本記事の完成画面
image.png

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で選択した日付の次の日付からしか選択できないということになります。
image.png
dateFormat="yyyy/M/dd"は表示フォーマットです。
今回はstartDateendDateはともにパラメーター(http://localhost:8080/booking/${startDate}/${endDate})としてバック側に渡しています。

3. 最後に

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

4
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up

Qiita Advent Calendar is held!

Qiita Advent Calendar is an article posting event where you post articles by filling a calendar 🎅

Some calendars come with gifts and some gifts are drawn from all calendars 👀

Please tie the article to your calendar and let's enjoy Christmas together!

4
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?