[react-datepicker] 달력 구현 및 주말/양력 휴일/음력 휴일 비활성화 하기

Next.js에서 react-datepicker를 사용하여 달력을 구현했었고

[React] 달력 만들기(react-datePicker)_v2

 

추가로 주말/공휴일 때 날짜 선택 비활성화 하는 기능을 구현하였다.

 

원래도 기능 구현 끝나면 정리를 하는 편이지만 이번에는 React 버전 예제가 너무 없어서 더더욱 정리하게 되었다..

---

JS datepicker와 React datepicker 다른 점

비활성화 항목은 크게 3가지로 잡아서 진행하였고 조건문(if) 문을 사용하여 항목에 맞게 활성화 유무를 판단하였다.

• 주말
• 양력 공휴일
• 음력 공휴일

 

코드 정리 전에 js 버전 datepicker와 react 버전 datepicker에서 다른 점이라면 (다른 건 더 많긴 함)

 

JS 버전에서는 "beforeShowDay" 속성에 날짜 비활성화 할 수 있고

출처 : https://www.wrapuppro.com/programing/view/WYd9dP7Po9b9ByH

 

React 버전에서는 "filterDate" 속성에서 날짜 비활성화 가능하다.

출처 : https://reactdatepicker.com/

 

---

 

 

주말/양력 휴일/음력 휴일 비활성화

react-datepicker를 사용했기 때문에 속성으로는 "filterDate"를 사용했고 value에는 함수를 넣어줬다.

 

따로 설명하는 것 보다는 전체적인 흐름 안에서 설명을 적어두는 게 더 좋을 것 같아서 아래와 같이 정리함!

 

코드

import DatePicker, { registerLocale } from "react-datepicker";
import ko from "date-fns/locale/ko";
import "react-datepicker/dist/react-datepicker.css";

// 음력 → 양력 계산기
import { Resut } from "./LunarCalendar";

const Calendar = (props) => {
  registerLocale("ko", ko);

  const set_luna_holidays = () => {
    const result = luna_holidays.map((item) => {
      const year = new Date().getFullYear();

      return Resut(year + item);
    });

    return result;
  };

  const solar_holidays = [
    "0101",
    "0301",
    "0505",
    "0606",
    "0717",
    "0815",
    "1003",
    "1225",
  ]; // 양력 휴일
  
  const luna_holidays = [
    "1231",
    "0101",
    "0102",
    "0408",
    "0814",
    "0815",
    "0816",
  ]; // 음력 휴일

  const luna_solar_holidays = set_luna_holidays(); // 음력 → 양력 휴일
  const added_holidays = ["0817", "1009"]; // 추가 휴일

  const disabledWeekends = (date) => {
    let isDisabled = true;
    let dayOfWeek = date.getDay(); // 주마다 Number로 반환됨 (ex, 첫째 주 : 0, 둘째 주 : 1)
    let day = date.getDate(); // 날짜가 Number로 반환됨

    // 주말 구하기
    if (week_array[dayOfWeek] === "토" || week_array[dayOfWeek] === "일") {
      isDisabled = false;
    }

    // 공휴일 구하기
    else {
      let month = date.getMonth() + 1;
      month = month >= 10 ? month : "0" + month;
      day = day >= 10 ? day : "0" + day;
      let set_disabled = String(month) + String(day);
      let get_holiday1 = solar_holidays.includes(set_disabled);
      let get_holiday2 = luna_solar_holidays.includes(set_disabled);
      let get_holiday3 = added_holidays.includes(set_disabled);
      // includes === indexOf 대체 가능

      // get_holiday1 === get_holiday1 > -1 || get_holiday2 === get_holiday2 > -1 || get_holiday3 === get_holiday3 > -1 대체 가능
      if (get_holiday1 || get_holiday2 || get_holiday3) {
        isDisabled = false;
      }
    }

    return isDisabled;
  };

  return (
    <>
      <DatePicker
        dateFormat="yyyy/MM/dd"
        locale="ko"
        startDate={today}
        selected={selectDate}
        onChange={(date) => setSelectDate(date)}
        minDate={minDate}
        maxDate={maxDate}
        inline
        showYearDropdown
        showMonthDropdown
        dropdownMode="select"
        filterDate={disabledWeekends} // 주말/공휴일(양력, 음력) 비활성화
      />
    </>
  );
};

export default Calendar;

 

음력 → 양력 구하는 js 파일은 아래 블로그에서 가져옴 (./LunarCalendar)

JavaScript ) 자바스크립트 달력만들기. 음력을 양력으로 변환하기. 음력, 양력변환 계산 코드

 

2023.02.17 추가

+ header 커스텀하는 과정에서 range error 발생하는 경우 아래 블로그 참고

[react-datepicker] range is not defined