[NextJS] input type="date"을 활용한 기간 선택

NextJS와 NextUI를 사용하여 구현한 프로젝트.
실질적으로는 React(JS), HTML가 뒤섞인 코드입니다.
 
 

❗날것의 코드 주의

---

 
📆구현 기능

날짜선택을 통한 기간 지정 조회
옵션 : 최근 1개월, 최근 3개월, 최근 6개월 선택가능하게

 
 
🧶고려할 점.
 
1. 기본값
시작일은 프로젝트 생성한 1월 1일로 가정.
종료일은 오늘(가장 최근) 날짜. 그 이후 날짜는 disable. 
 
2. 날짜 변경 시
- 시작일은 종료일보다 전이어야함 (시작일<종료일)
- 시작일을을 먼저 선택하는 경우에도, 종료일 onchage 발생 시 선택된 종료일을 기준으로 이전 날짜만 선택 가능하도록 조절. 선택된 종료일 이후는 전부 disable.
 
 

import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import { Container, Input, Button } from '@nextui-org/react';
import { IoSearchSharp } from 'react-icons/io5';
import dataFormat from '../../lib/dataFormat';

export default function SelectPeriod() {
  useEffect(() => {
    setDate({
      startDate: '2023-01-01',
      endDate: today,
    });
  }, []);

  const [limitDate, setLimitDate] = useState({
    minStartDate: '2023-01-01',
    maxStartDate: today,
    minEndDate: '2023-01-01',
    maxEndDate: today,
  });

  useEffect(() => {
    setLimitDate({
      minStartDate: '2023-01-01',
      maxStartDate: date.endDate,
      minEndDate: date.startDate,
      maxEndDate: today,
    });
  }, [date]);

  const onChange = (event) => {
    const { name, value } = event.target;
    setDate({
      ...date,
      [name]: value,
    });
  };

  // 기간 선택
  const [period, setPeriod] = useState('');
  useEffect(() => {
    if (period !== '') {
      setDate({
        startDate: dataFormat.toStringByFormatting(
          new Date(new Date().setMonth(new Date().getMonth() - period)),
          '-'
        ),
        endDate: today,
      });
    }
  }, [period]);

  // 검색 - filter
  const router = useRouter();

  const submitHandler = (e) => {
    e.preventDefault();
    router.push(
      `/creator/mypoint?startDate=${date.startDate}&endDate=${date.endDate}&category=${selectedCategory}`
    );
  };

  return (
    <Container>
      <form onSubmit={submitHandler}>
        <div>
          <div>
            <div>
              <Input
                aria-label="시작일"
                type="date"
                name="startDate"
                value={date.startDate}
                min={limitDate.minStartDate}
                max={limitDate.maxStartDate}
                onChange={onChange}
              />
              &nbsp; ~ &nbsp;
              <Input
                aria-label="종료일"
                type="date"
                name="endDate"
                value={date.endDate}
                min={limitDate.minEndDate}
                max={limitDate.maxEndDate}
                onChange={onChange}
              />
            </div>
            <div>
              <select onChange={(event) => setPeriod(event.target.value)}>
                <option value="">전체기간</option>
                <option value="1">1개월</option>
                <option value="3">3개월</option>
                <option value="6">6개월</option>
              </select>
            </div>
          </div>
          <Button
            color="secondary"
            icon={<IoSearchSharp fill="currentColor" />}
            type="submit"
            onPress={() =>
              onSearch(date.startDate, date.endDate, selectedCategory)
            }
          >
            검색
          </Button>
        </div>
      </form>
    </Container>
  );
}

 

•  NextUI에서 onCilck은 onPress로 사용되길 권고합니다.