[TIL] 23Y03M25D

in TIL
[TIL] 23Y03M25D

오늘 한 일

react에서 date-picker 커스터마이징 작업

느낀 점

며칠 전부터 계속 date picker를 커스터마이징하는 작업을 하고 있었는데 어떻게 해야할지 몰랐다. 더군다나 라이브러리를 가져와서 직접 코드를 다 수정해야하니까 막막함이 계속 앞서고 있었다. 그렇지만 구글에 계속 검색하고 라이브러리 문서를 참고하여 끝내 원하는 모양으로 커스터마이징작업을 완료해서 뿌듯했다.

배운 점

date-picker.png

date-picker 옵션은 정말 많은데 나는 해당 모양으로 커스터마이징 하고싶어서 일단 Header부분을 수정했다. Header를 수정하기 위해서는 renderCustomHeader를 이용해 컴포넌트를 따로 제작하면 된다.

그리고 요일부분에 기본적으로 Su, Mo이렇게 나오게 되는데 나처럼 SUN, MON으로 수정하고 싶으면 date-picker옵션 중 formatWeekDay 를 수정하면 된다.

일요일을 빨간 글자로 보여주기 위해서는 전역에서 사용되는 global CSS에서 date-picker에서 사용하는 똑같은 이름을 가진 선택자를 이용해 수정해주면 된다.

CODE

// renderCustomHead영역
const CustomHeader = ({ date, decreaseMonth, increaseMonth }: any) => {
  // 10, 11, 12월은 0을 붙이지 않게 하기 위한 month 변수
  const month =
    getMonth(date) + 1 === 10 ||
    getMonth(date) + 1 === 11 ||
    getMonth(date) + 1 === 12
      ? getMonth(date) + 1
      : "0" + (getMonth(date) + 1).toString();

  return (
    <div className={styles.headerLayout}>
      <div className={styles.leftArrow} onClick={decreaseMonth}>
        <I_leftArrow />
      </div>
      <div className={styles.text}>
        {getYear(date)}.{month}
      </div>
      <div className={styles.rightArrow} onClick={increaseMonth}>
        <I_rightArrow />
      </div>
    </div>
	);
}

// formatWeekDay
formatWeekDay={(date) =>
  date.toString().substring(0, 3).toLocaleUpperCase()
}

// 일요일 빨간 글자로 변경
.react-datepicker__day-name { // SUN 빨간색으로 변경
	&:first-child {
    color: $Red1;
  }
}
.react-datepicker__day { // 일요일에 해당하는 숫자 빨간색으로 변경
  &:first-child {
    color: $Red1;
  }
}

Reference

© 2024. All right reserved Min