[자바스크립트] Date Range Picker : 기간 날짜 라이브러리

 

웹 개발을 하면서 날짜를 선택하여 사용자로부터 기간을 받고 싶을 때, 여러분들은 어떻게 하나요?

기본적으로 input 태그에 type을 date로 하여 2개의 input 필드를 만들 겁니다.

<input type="date" name="startDate" id="startDate">
<input type="date" name="endDate" id="endDate">

See the Pen basic-date by wooncloud (@lomeiskk) on CodePen.

 

 

하지만 위의 방법은 첫 날짜가 마지막 날짜보다 이후의 날짜가 될 수 없고, 여러 가지 유효성 검사를 해야 하며, 직관적이지 않고 불편한 부분이 많습니다.

 

물론 제이쿼리 UI에서 제공하는 Date Picker를 보면 아래와 같이 기간을 설정할 수 있는 기능이 있습니다.

 

제이쿼리 Date Picker (Select the date range) 그림 일부분

하지만 제 눈엔 예뻐 보이지 않네요. 여러분은 어떤가요?

이 디자인이 예쁘다면 사용하면 되겠지만, 그렇지 않으면 CSS를 싹 바꿔야 할지도 모릅니다.

 

하지만 이번에 소개해드릴 Date Range Picker는 디자인도 좋고 다양한 기능이 있어서 추천해드립니다.

 

---

 

1. Date Range Picker 홈페이지

www.daterangepicker.com/

Date Range Picker — JavaScript Date & Time Picker Library

728x90

---

 

2. 소개

1) 사용하기

Date Range Picker는 bootstrep과 비슷한 심플하고 깔끔한 디자인을 가지고 있습니다.

그래서 어떤 디자인의 웹사이트에 사용하든 잘 어울리죠.

$('input[name="dates"]').daterangepicker()

---

2) 시간 포함하기

그리고 날짜 이외에 시간 정보도 함께 추가할 수 있습니다.

$('input[name="datetimes"]').daterangepicker({
	timePicker: true,
});

---

3) 날짜 하나만 선택하기

이 플러그인의 디자인이 마음에 드는데 1개의 날짜만 선택하고 싶으면 1개의 날짜만 선택할 수 있습니다.

$('input[name="single"]').daterangepicker({
	singleDatePicker: true,
});

---

4) 스크립트로 날짜 선택

//create a new date range picker
$('#daterange').daterangepicker({ startDate: '03/05/2005', endDate: '03/06/2005' });

//change the selected date range of that picker
$('#daterange').data('daterangepicker').setStartDate('03/01/2014');
$('#daterange').data('daterangepicker').setEndDate('03/31/2014');

 

 

 

 

 

---

 

3. 쉽게 세팅하기

이 플러그인은 옵션이 꽤 많이 있습니다.

옵션들을 찾아가면서 하나하나 타이핑하거나 복사 붙여넣기 하면서 하나의 Date Picker를 만드는 것은 힘듭니다.

그렇기 때문에 원하는 옵션을 선택하면 자동으로 만들어주는 기능이 이 사이트에 있습니다.

 

 

www.daterangepicker.com/#config

Date Range Picker — JavaScript Date & Time Picker Library

 

 

 

위의 링크로 접속하여 원하는 기능을 고르면 아래의 복사할 수 있는 Configuration 코드가 나옵니다.

가볍게 복사 붙여넣기 해서 쉽게 Date Range Picker를 만들 수 있습니다.

다음은 제가 만든 한국용 Date Range Picker입니다.

 

See the Pen jOrYRGY by wooncloud (@lomeiskk) on CodePen.

$('#demo').daterangepicker({
    "locale": {
        "format": "YYYY-MM-DD",
        "separator": " ~ ",
        "applyLabel": "확인",
        "cancelLabel": "취소",
        "fromLabel": "From",
        "toLabel": "To",
        "customRangeLabel": "Custom",
        "weekLabel": "W",
        "daysOfWeek": ["일", "월", "화", "수", "목", "금", "토"],
        "monthNames": ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"],
    },
    "startDate": new Date(),
    "endDate": new Date(),
    "drops": "auto"
}, function (start, end, label) {
    console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
});