DateRangePicker

DatePicker와 DateRangePicker 의 차이점?

두 플러그인 다 날짜를 선택하는 용도이지만 조금씩 다르다.

	DatePicker	DateRangePicker
기본 표시 달 수	한 달	두 달
선택 날짜 유형	하루	기간
항상 표출 여부	DIV 태그 사용	Option 사용

항상 나타내기

페이지가 로드되었을 때, DateRangePicker의 달력이 페이지에 보여지게 하기 위해서는 2가지의 옵션값을 추가해주어야한다.
1. alwaysOpen: true
2. container:'#datepicker_div'

만약 $(...).dateRangePicker is not a function 와 같은 에러가 뜬다면 플러그인 받아오는 주소를 확인해보자.

Moment

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js"></script>

DateRangePicker

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-date-range-picker/0.14.2/jquery.daterangepicker.min.js"></script>

함수

Configuration

format
날짜 포맷
inline (Blooean)
달력의 display 상태 지정 / true -> container 속성을 반드시 지정해주어야함.
container (String, CSS selector || DOM Object)
달력이 표출 영역
alwaysOpen (Blooean)
달력 표출 여부 (항상)
singleDate (Blooean)
true = 달력 하나 / false(기본) = 달력 두 개
showTopBar (Blooean)
'날짜를 선택하시오' 또는 선택된 날짜 표출 영역 표출 여부
selectForward (Blooean)
첫번째 선택한 날짜 이후의 날짜를 두번째 날짜로 선택 가능 여부
selectBackward (Blooean)
첫번째 선택한 날짜 이전의 날짜를 두번째 날짜로 선택 가능 여부
startDate (String or false)
달력에서 선택 가능한 날짜의 시작 날짜
오늘로 설정하고자 하면 startDate: new Date()

Events

달력에 트리거를 건다.

$(dom).dateRangePicker()
.bind('datepicker-first-selected', function(event, obj){}
첫번째 날짜를 선택 시 발생
obj = {
   date1 : 첫번째 날짜 Date Object
}

.bind('datepicker-change', function(event, obj){}
두번째 날짜 선택 시 발생
obj = {
   date1 : 첫번째 날짜 Date Object,
   date2 : 두번째 날짜 Date Object,
   value : "2023-01-01 to 2023-01-23"
}

APIs

$(dom).data('dataRangePicker')
.setDateRange('2023-01-20', '2023-01-22')
날짜 영역을 설정한다.

.setStart('2023-01-07')
첫번째 날짜를 설정한다.

.setEnd('2023-01-09')
두번째 날짜를 설정한다.

.clear()
달력 날짜 설정을 초기화한다.

---

그 외 막혔던 것들

두 개의 달력을 동기화하여 사용하려고 하였으나, 달력 선언부터 이벤트까지 하나를 설정하면 하나가 안되고 하는 부분이 많았다..😥

1. 달력 Object 생성

var obj1 = {
		inline: true, // 달력의 display
		format: 'YYYY/MM/DD', // 날짜 포맷
		container: '#dom_id', // inline:true면 필수로 적어줘야함 달력 표출 영역
		alwaysOpen: true, // 항상 표출 여부 true - yes
		selectBackward: false, // true- 처음 선택한 날짜의 이전으로 선택 가능 / 불가능 
		selectForward: true, // true - 처음 선택한 날짜의 이후로 선택 가능 / 불가능
		startDate: new Date(), // 시작 날짜 new Date()면 오늘 날짜이므로 전날선택 불가능
//		showTopbar: false, // 상단 날짜 입력 칸 표출 여부
	}

$('#dom_id1').dateRangePicker({
	    inline: true, 
		format: 'YYYY/MM/DD', 
		container: '#dom_id', 
		alwaysOpen: true, 
		selectBackward: false, 
		selectForward: true, 
		startDate: new Date(), 
});

아래와 같이 만들었을때는 나중에 트리거 이벤트와 api 사용할 때 find / is를 찾지 못한다는 에러가 발생했다.

2. 달력 생성 및 트리거 이벤트

두 개의 달력 동기화

• 첫 번째 날짜 선택 시 다른 달력의 첫번째 날짜 선택하는 setStart()
• 두 번재 날짜 선택 시 다른 달력의 두번째 날짜를 선택하는 setEnd()
setEnd()의 두번째 인자로 true를 넣어주어야 각 피커의 트리거가 무한루프 돌지 않는다!

	$('#dom_id1').dateRangePicker(obj1)
	.bind('datepicker-first-date-selected', function(event, obj){
		var startDay = obj.date1.getFullYear() + "." + (parseInt(obj.date1.getMonth())+1) + "." + obj.date1.getDate
        
		$("#dom_id2").data('dateRangePicker')
		.setStart(startDay);
	})
	.bind('datepicker-change',function(event,obj){
		var finishDay = obj.date2.getFullYear() + "." + (parseInt(obj.date2.getMonth())+1) + "." + obj.date2.getDate();
		
		$("#dom_id2").data('dateRangePicker')
		.setEnd(finishDay, true); //true를 넣지 않으면 무한 루프
	});

	$('#dom_id2').dateRangePicker(obj2)
	.bind('datepicker-first-date-selected', function(event, obj){
		var startDay = obj.date1.getFullYear() + "." + (parseInt(obj.date1.getMonth())+1) + "." + obj.date1.getDate();
		
		$("#dom_id1").data('dateRangePicker')
		.setStart(startDay);
	})
	.bind('datepicker-change',function(event,obj){
		var finishDay = obj.date2.getFullYear() + "." + (parseInt(obj.date2.getMonth())+1) + "." + obj.date2.getDate();
		
		$("#dom_id1").data('dateRangePicker')
		.setEnd(finishDay, true); //true를 넣지 않으면 무한 루프
	});

참고 사이트
http://longbill.github.io/jquery-date-range-picker/