킹미넴의 예민한 코드

datepicker는 활용도가 정말 높은데 그때그때 import 하는것보다 고정적인 기준을 두고 공용화 하고 싶어서 진행해보았다.

1. import

- 상단의 두개는 datepicker 설치시 기본으로 불러오고,

- 하단의 언어는 달력에도 다국어를 지원해주기 위해 불러왔다.

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

import ko from "date-fns/locale/ko";
import enUS from "date-fns/locale/en-US";
import es from "date-fns/locale/es";
import ja from "date-fns/locale/ja";

2. 타입과 함수

type Props = {
  // 시작날짜, 종료날짜, 혹은 단일 선택인지 타입 지정
  dateType: "start" | "end" | "select";
  // selected로 설정할 date 정보값
  date: Date | null;
  // onchange시에 작동할 함수 정보
  onChangeFn: (date: Date) => void;
  // 종료날짜의 달력일때 dateForMin에 시작날짜 state를 넣으면 시작날짜의 앞날은 종료날짜로 선택이 불가하게 설정함.
  dateForMin?: Date | null;
  // 선택이 불가 하게 할 옵션 설정
  readOnlyOpt?: boolean;
  // time 설정까지 가능한 datepicker 인지 구분
  isTime?: boolean;
};

// 데이트피커 로케일별로 언어 변경 제공
export function datePickerLocale() {
  const locale = localStorage.getItem("i18nextLng");
  switch (locale) {
    case "ko":
      return ko;
    case "ja":
      return ja;
    case "es":
      return es;
    default:
      return enUS;
  }
}

3. datepicker return 하기

export default function EdgeDatePicker(props: Props) {
  const { dateType, date, onChangeFn, dateForMin, errors, readOnlyOpt, isTime = false } = props;

  return isTime ? (
    <DatePicker
      locale={datePickerLocale()}
      minDate={dateType === "end" ? dateForMin : null}
      maxDate={new Date()}
      readOnly={readOnlyOpt}
      placeholderText="YYYY-MM-DD HH:MM"
      onChange={onChangeFn}
      selected={date}
      dateFormat="yyyy-MM-dd HH:mm"
      timeFormat="p"
      //   키보드 입력 방지
      onKeyDown={(e: any) => {
        e.preventDefault();
      }}
      showTimeInput
    />
  ) : (
    <DatePicker
      locale={datePickerLocale()}
      minDate={dateType === "end" ? dateForMin : null}
      maxDate={new Date()}
      readOnly={readOnlyOpt}
      placeholderText="YYYY-MM-DD"
      onChange={onChangeFn}
      selected={date}
      dateFormat="yyyy-MM-dd"
      //   키보드 입력 방지
      onKeyDown={(e: any) => {
        e.preventDefault();
      }}
    />
  );
}

개인적으로 시간까지 입력되는 datpicker유형도 필요해서, 컴포넌트를 하나 더 파기보단 그냥 옵션을 받아서 따로 제공하기로 하였다

https://reactdatepicker.com/

이 페이지에 들어가면 눌러보면서 기능이 어떤것인지 얼추 감이 온다.