728x90
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
728x90
'프론트엔드 > 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 |