Datepicker 업그레이드버전, DateRangePicker 사용법.
웹페이지를 개발을 하다보면, 사용자들에게 날짜를 입력받아야 할 경우가 종종 발생한다.
매번 Jquery UI에서 제공하는 Datepicker만 사용하다가,
왜인지는 모르겠지만 '다른 것을 사용해보겠다' 라고 마음먹고 구글검색을 시작했다.
그래서 내가 찾은 것이 DateRangePicker 이다.
찾아서 이것을 선택한 이유는 시작일시와 종료일시, 2가지를 입력받아야 했고
그러한 입력을 한번에 해결할 수 있는 컴포넌트였기 때문에 선택하였다.
그래서 이름도 DateRangePicker인가보다.
Date Range Picker — JavaScript Date & Time Picker Library
Originally created for reports at Improvely, the Date Range Picker can be attached to any webpage element to pop up two calendars for selecting dates, times, or predefined ranges like "Last 30 Days". To get started, include jQuery, Moment.js and Date Range
www.daterangepicker.com
위 페이지를 참고하여, 사용방법 및 옵션/이벤트에 대해서 설명해보겠다.
1. css / js 참조하기.
|
1
2
3
4
5
6
7
|
<!-- 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>
|
cs |
UI 및 기능을 사용할 수 있게끔 해주는 css / js 파일을 참조한다.
2. 실행하기.
|
1
|
$('selector').daterangepicker();
|
cs |
selector값에 선택자를 넣어주고, 실행해주면 아래처럼 깔끔한 달력이 출력된다.
하지만 아쉬운 부분이..여럿 보인다.
그 이유는 DateRangePicker는 외국 개발자가 개발한 컴포넌트이기에, 모든 것이 외국 사용자에 맞춰줘 있었다.
그래서 아쉬운 부분을 나열해보면 아래와 같다.
- 년도/요일/확인,취소버튼이 영어로 되어있다. (ex. Apr, May, Su, Mo, Cancel, Apply등)
- 최상단에 년월이 아닌, 월년으로 표시되어 노출된다.
- 일반적으로 우리는 확인/취소 버튼 순으로 되어 있는데, 취소/확인 순으로 되어있다.
텍스트가 영어로 되어있거나, 노출되는 텍스트/버튼의 위치가 조금은 아쉬운 점이 있었다.
그래서 옵션값을 이용해서, 내 입맛에 맞게 수정해보았다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
$("#txtDate").daterangepicker({
locale: {
"separator": " ~ ", // 시작일시와 종료일시 구분자
"format": 'YYYY-MM-DD HH:mm:ss', // 일시 노출 포맷
"applyLabel": "확인", // 확인 버튼 텍스트
"cancelLabel": "취소", // 취소 버튼 텍스트
"daysOfWeek": ["일", "월", "화", "수", "목", "금", "토"],
"monthNames": ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"]
},
timePicker: true, // 시간 노출 여부
showDropdowns: true, // 년월 수동 설정 여부
autoApply: true, // 확인/취소 버튼 사용여부
timePicker24Hour: true, // 24시간 노출 여부(ex> true : 23:50, false : PM 11:50)
timePickerSeconds: true, // 초 노출 여부
singleDatePicker: true // 하나의 달력 사용 여부
});
$("#txtDate").on('show.daterangepicker', function (ev, picker) {
$(".yearselect").css("float", "left");
$(".monthselect").css("float", "right");
$(".cancelBtn").css("float", "right");
});
|
cs |
위 옵션값과 이벤트를 이용하면, 위에처럼 깔끔한 달력을 얻을 수 있게 된다.
DateRangePicker를 이용하면 Validation에 대한 개발 공수도 적어질뿐만 아니라,
사용자도 시작일시와 종료일시를 정확하게 선택할 수 있게 되어진다.
사실 18번째 라인에서 설정한 css값은 정확하고 정답은 아닌 것 같다.
내가 아는 css 기술만 사용한 것이니, 더 좋은 방법이 있다면 댓글로 공유해주시면 감사하겠습니다.
이 컴포넌트를 사용하여, 더 좋은 홈페이지 개발이 되셨으면 좋겠다.