react-datepicker

• Calender/style.jsx

import styled from "styled-components";

export const DatePickerContainer = styled.div`
  display: flex;
  input {
    cursor: pointer;
    background-color: transparent;
    width: 100%;
    height: 65px;
    border: none;
    padding: 40px 20px 13px 20px;
    &:hover {
      border-radius: 8px;
      border: 2px solid ${(props) => props.theme.darkBlack};
    }
  }
  .react-datepicker__day--keyboard-selected,
  .react-datepicker__month-text--keyboard-selected,
  .react-datepicker__quarter-text--keyboard-selected,
  .react-datepicker__year-text--keyboard-selected {
    border-radius: 50%;
    background-color: ${(props) => props.theme.pointColor};
  }
  .react-datepicker__day--selected,
  .react-datepicker__day--range-end,
  .react-datepicker__day--in-selecting-range,
  .react-datepicker__day--in-range,
  .react-datepicker__day--selecting-range-end {
    border-radius: 50%;
    background-color: ${(props) => props.theme.pointColor};
  }
  .react-datepicker__day:hover,
  .react-datepicker__month-text:hover,
  .react-datepicker__quarter-text:hover,
  .react-datepicker__year-text:hover {
    border-radius: 50%;
  }
`;

export const InOutBox = styled.div`
  position: relative;
  width: 50%;
  border-right: ${({ first }) => (first ? "1px" : "0px")} solid #b0b0b0;
  border-bottom: 1px solid #b0b0b0;
`;

export const FixedText = styled.div`
  position: absolute;
  z-index: 1;
  left: 11%;
  top: 23%;
  font-size: 14px;
  font-weight: bold;
`;

• Calender/Calender.jsx

import React from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { ko } from "date-fns/esm/locale";
import { DatePickerContainer, FixedText, InOutBox } from "./style";

export default function Calender({
    startDate,
    endDate,
    setStartDate,
    setEndDate,
}) {
    return (
        <>
            <DatePickerContainer>
                <InOutBox first>
                    <FixedText>체크인</FixedText>
                    <DatePicker
                        dateFormat={"yyyy.MM.dd"}
                        locale={ko}
                        minDate={new Date()}
                        selected={startDate}
                        onChange={(date) => setStartDate(date)}
                        selectsStart
                        startDate={startDate}
                        endDate={endDate}
                        monthsShown={2}
                        withPortal
                        placeholderText="날짜 선택"
                    />
                </InOutBox>
                <InOutBox>
                    <FixedText>체크아웃</FixedText>
                    <DatePicker
                        dateFormat={"yyyy.MM.dd"}
                        locale={ko}
                        minDate={new Date()}
                        selected={endDate}
                        onChange={(date) => setEndDate(date)}
                        selectsEnd
                        startDate={startDate}
                        endDate={endDate}
                        monthsShown={2}
                        withPortal
                        placeholderText="날짜 선택"
                    />
                </InOutBox>
            </DatePickerContainer>
        </>
    );
}

TRY-1. 두번째 DatePicker에 minDate={startDate}로 속성을 넣어서 체크아웃 일자는 시작날짜 이후만 선택 가능하게 하려 했으나, 체크아웃 달력을 먼저 선택할 경우 시작날짜가 선택되어있지 않아 이전 날짜를 선택할 수 있었음..꼬임..

TRY-2. startDate를 new Date()로 해서 오늘날짜부터 시작했으니 endDate에도 동일하게 minDate을 new Date()로 줘서 오늘 날짜 이후만 선택 가능하게 함으로써 해결..