TOAST UI DateRangePicker 날짜 초기화

날짜 범위 선택 라이브러리 중 디자인이 이쁘고 사용성이 좋은 TOAST UI DateRangePicker가 있다.

특별히 선택된 날짜를 초기화 하는 기능을 구현할 때,

공식 document 에 나온 예제나 API 설명만으로는 기능 구현에 어려움이 있었는데,
얼마간 삽질 후 얻은 '초기화' 방법을 여기에 소개한다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"/>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">        
        <link rel="stylesheet" href="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.css"/>
        <title>Document</title>
        <style >
            .search_input {display: inline-flex;align-items: center;width: 100%;height: 27px;padding: 0 5px;border-radius: 4px;border: 1px solid #dddddd;font-weight: 400;font-size: 12px;color: #626262;}
            button {padding: 0;margin: 0;border: 0;background: none;cursor: pointer;outline: none;}
            .btn_reset_date {position: absolute;right: 10px;top: 50%;transform: translate(0, -50%);display: none;}
            .btn_reset_date.show {display: inline-flex;}   
            .btn_reset_date span {font-size: 16px;color: #626262;}
        </style>
    </head>
    <body>
        <div>
            <div class="d-flex" style="width:250px;">
                <div class="flex-grow-1 position-relative">
                    <input class="search_input" id="startpicker-input_order" name="" type="text" title="" autocomplete="off" readonly="readonly">
                    <button class="btn_reset_date" data-target="order_range_start">
                        <span class="material-symbols-outlined">close</span>
                    </button>
                    <div id="startpicker-container_order"></div>
                </div>
                <div class="flex-grow-0 d-flex align-items-center mx-1">~</div>
                <div class="flex-grow-1 position-relative">
                    <input  class="search_input" id="endpicker-input_order" name="" type="text" title="" autocomplete="off" readonly="readonly">
                    <button class="btn_reset_date" data-target="order_range_end">
                        <span class="material-symbols-outlined">close</span>
                    </button>
                    <div id="endpicker-container_order"></div>
                </div>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
        <script src="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.js"></script>
        <script>
            $(function(){
                const order_range = tui.DatePicker.createRangePicker({
                    startpicker: {
                        input: '#startpicker-input_order',
                        container: '#startpicker-container_order',
                        //date: new Date(2019, 3, 5)
                    },
                    endpicker: {
                        input: '#endpicker-input_order',
                        container: '#endpicker-container_order'
                    },
                    type: 'date',
                    format: 'yyyy-MM-dd',
                    timePicker: false,
                    language: 'ko',
                    selectableRanges: [
                        [
                            new Date(2019, 3, 1),
                            new Date(2019, 5, 1)
                        ],
                        [
                            new Date(2019, 3, 1),
                            new Date(2019, 10, 5)
                        ]
                    ]
                });

                order_range.on('change:start', function () {
                    if (order_range.getStartDate()) {
                        $('[data-target=order_range_start]').addClass('show');
                        order_range.setEndDate(order_range.getStartDate());
                    } else {
                        $('[data-target=order_range_start]').removeClass('show');
                    }
                });

                order_range.on('change:end', function () {
                    if (order_range.getEndDate()) {
                        $('[data-target=order_range_end]').addClass('show');
                    } else {
                        $('[data-target=order_range_end]').removeClass('show');
                    }
                });
                $('.btn_reset_date').on('click', function(event){   	  	
                    if($(event.currentTarget).data('target') === 'order_range_start'){    	  		
                        order_range.setStartDate(null);
                    }else if($(event.currentTarget).data('target') === 'order_range_end'){
                        order_range.setEndDate(null);
                    }
                });
            });
        </script>
    </body>
</html>

선택된 날짜 초기화 방법을 간략히 얘기하자면,
1. default 상태에선 초기화 버튼이 보이지 않다가
2. 날짜가 입력되면 초기화 버튼이 보인다. - change:start, change:end 이벤트 일어나면 getStartDate(), getEndDate() 를 통해 날짜가 입력됐는지 파악
3. 초기화 버튼을 클릭하면 입력된 날짜가 삭제된다. - setStartDate(null), setEndDate(null)

공식 문서 https://ui.toast.com/tui-date-picker

TOAST UI :: Make Your Web Delicious!

TOAST UI is an open-source JavaScript UI library maintained by NHN Cloud.

ui.toast.com

'프론트엔드 > javascript' 카테고리의 다른 글

엑셀 다운로드 (0)	2023.10.27
SVG 애니메이션 만들기 (0)	2023.10.17
SPA에서 History API 이해 (0)	2023.10.16
Web APIs - window size & browser coordinate & scroll (0)	2022.04.06
배열에서 id 로 object를 찾는 방법 (0)	2022.03.25

무찌르자 단팥빵

TOAST UI DateRangePicker 날짜 초기화