[TIL][JavaScript] Date Range Picker

김연찬·2024년 10월 29일

참조: Date Range Picker 홈페이지

배경

진행 중인 프로젝트에서 거래내역을 조회하는데 일자 필터를 적용해야했다. 호기롭게 직접 구현할 생각을 하고 있었다. 하지만 날짜 입력 유효성 검사, 캘린더 UI 모달 닫힘, 날짜형식 변환 등 구현할 것들을 생각하니 라이브러리를 활용하는 것이 가장 좋은 선택인 것 같아. 일자 필터 라이브러리를 찾아보았다.

일자 필터 선택

일자 필터 종류

Flatpickr
가볍고 빠른 날짜 선택기 라이브러리이다. 다양한 날짜 형식을 지원하며, 시간 선택과 범위 선택 기능을 제공한다. 커스터마이징이 용이하고, 플러그인 기능으로 추가 기능을 쉽게 확장할 수 있다.
Bootstrap Datepicker
Bootstrap 스타일의 날짜 선택기로, 날짜 선택, 날짜 범위, 다국어 지원 등이 포함되어 있다.
Airbnb Date Picker
Airbnb에서 만든 React 전용 날짜 선택기 라이브러리로, 날짜 범위 선택 기능에 강점이 있다.

왜 Date Range Picker?

기획서와 가장 일치하는 UI를 가지고 있는게 Date Range Picker라 채택하게 되었다. 추가 적인 커스텀 작업이 가장 덜 필요하기 때문이였다.

Date Range Picker 사용하기

패키지 설치

<!-- css -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>
<!-- js-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

옵션 설정

// 문서가 로드되면 함수 실행
$(document).ready(function () {

    // 'data-date' 이름의 input 요소에 daterangepicker 설정
    $('input[name="data-date"]').daterangepicker({
        
        // 로케일 설정 (한국어 날짜 포맷과 레이블)
        locale: {
            format: 'YYYY/MM/DD', // 날짜 표시 형식
            separator: ' ~ ', // 시작 날짜와 종료 날짜 사이의 구분자
            applyLabel: '적용', // 적용 버튼의 텍스트
            cancelLabel: '취소', // 취소 버튼의 텍스트
            monthNames: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"], // 월 이름
            daysOfWeek: ["일", "월", "화", "수", "목", "금", "토"], // 요일 이름
            customRangeLabel: '사용자 지정' // 사용자 지정 범위의 텍스트
        },

        // 범위 설정
        ranges: {
            '이번 달': [moment().startOf('month'), moment().endOf('month')], // 이번 달 전체
            '지난 달': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')], // 지난 달 전체
            '지난 7일': [moment().subtract(6, 'days'), moment()], // 최근 7일
            '지난 14일': [moment().subtract(13, 'days'), moment()], // 최근 14일
            '지난 60일': [moment().subtract(59, 'days'), moment()], // 최근 60일
            '지난 3개월': [moment().subtract(3, 'months').startOf('month'), moment().endOf('month')], // 최근 3개월
            '지난 6개월': [moment().subtract(6, 'months').startOf('month'), moment().endOf('month')] // 최근 6개월
        },
        
        showDropdowns: true, // 년/월 선택 드롭다운을 항상 표시
        alwaysShowCalendars: true, // 캘린더가 항상 보이도록 설정
        opens: "left", // 달력 표시 방향 설정 (왼쪽으로 열림)
        linkedCalendars: false // 시작과 종료 날짜의 연결 여부 설정 (false면 독립적)
    });
});