React Datepicker 설치, 적용하기

yarn add react-datepicker date-fns
yarn add -D @types/react-datepicker

// or

npm install react-datepicker date-fns
npm install --save-dev @types/react-datepicker

MyDatePicker.jsx

import React from "react";
import DatePicker, { registerLocale } from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import ko from "date-fns/locale/ko";
import "./css/MyDatePicker.css"; // 커스텀 스타일 파일 추가

registerLocale("ko", ko);

const MyDatePicker = ({ moment, setMoment }) => {
  // moment가 Date 객체가 아닐 경우를 대비해 변환
  const selectedDate = moment instanceof Date ? moment : new Date(moment);

  return (
    <DatePicker
      selected={selectedDate} // 변환된 날짜를 사용
      onChange={(date) => setMoment(date)}
      showTimeSelect
      timeFormat="HH:mm"
      timeIntervals={15}
      dateFormat="yy.MM.dd HH:mm"
      timeCaption="시간"
      locale="ko"
      className="mt-1 p-2 w-full border rounded-md"
      placeholderText="YYYY-MM-DD HH:MM"
      required
    />
  );
};

export default MyDatePicker;

MyDatePicker.css

/* 스타일링 추가 */
/* .react-datepicker__day--weekend {
    color: #007BFF; /* 기본적으로 주말은 파란색 */
/* }*/

.react-datepicker__day--weekend:first-child {
  color: #FF4B4B; /* 기본적으로 주말은 파란색 */
}

/* 토요일을 파란색으로 */
.react-datepicker__day--saturday:last-child {
    color: #007BFF; /* 파란색 */
}

/* 이번 달이 아닌 날짜 흐리게 */
.react-datepicker__day--outside-month {
    color: #A9A9A9; /* 회색 */
    opacity: 0.5;
}