jQuery datePicker - 선택가능한 날짜 범위지정하기 (오늘 이전날짜 막기, min/maxDate 설정)

예약기능을 구현할때 가장 까다로운것이 '예약 가능한 날짜만 뽑기' 인 것 같다.

특정 기간만 제외하는 로직은 짰는데, 이걸 적용하고 나니

달력 버튼을 예약시작 - 예약종료 날짜 사이만 허용하는게 안됐다.

 

2021.03.26 - [FrontEnd] - [JavaScript, jQuery] datepicker 에서 특정 기간 비활성화 하기

 

minDate, maxDate 에 각각 VO에 담긴 날짜를 줘보기도 했지만

아무리 형식을 맞춰줘도 둘다 적용되지 않았다.

(달력1에는 예약시작날짜, 달력2에는 예약종료날짜만 적용됨)

 

또한 예약 날짜가 오늘보다 앞선 경우 엊그제부터 날짜가 선택되는 불상사가 발생...

 

이를 고쳐보기 위해 

1) inDate 가 오늘 날짜보다 앞선 경우, minDate = 오늘

2) inDate 가 오늘 이후인경우 minDate = inDate

 

이 두가지 설정을 먼저 해주었고

 

			var today = new Date();
			var inDate = "${p_detail.parking_intime}";
			inDate = inDate.substr(0,10) //팀원이 지정한 VO 타입이 String이라 거친 과정. 받아오는 값이 date라면 생략해도 상관없다.
			var outDate = "${p_detail.parking_outtime}";
			if(today > new Date(inDate)){
				 var min = today;
			}else{
             var min = inDate;
             }
                 var max = outDate.substr(0,10);

 

3) edate 선택되지 않았을 때, sdate에 max값 설정.

edate값 있는경우 sdate에 edate 날짜 밸류 지정

4) 반대로, sdate 선택되지 않았을 때, edate에 min 값설정.

sdate값설정된 경우 그값을 함수로 받아 edate.minDate에 설정

 

*수정(2021.04.17)

위 두 조건을 순차적으로 적용했는데, 초기에 페이지가 로드될때 datepicker내 옵션설정 역할만 할 뿐

별로 소용이 없었다. 게다가 sdate 의 선택값을 edate 의 minDate 로 설정하지 못하는 오류가 발생했다. 

 

다시 아래의 코드로 줄여서 완전히 해결했다. 이렇게 하면 예약가능한 범위 내에서, sdate와 edate 를 벗어나지 않고 선택할 수 있다. 

                        $('#edate').datepicker("option", "onClose", function (selectedDate) {
                        	if(selectedDate.length==10)
                            $("#sdate").datepicker("option", "maxDate", selectedDate);
                        	else
                        		$("#sdate").datepicker("option", "maxDate", max);
                        });
                        $('#sdate').datepicker("option", "onClose", function (selectedDate) {
                        	if(selectedDate.length==10)
                                $("#edate").datepicker("option", "minDate", selectedDate);
                            else
                                $("#edate").datepicker("option", "minDate", min);
                        });
                  

 

 

나의 경우 input button속성으로 datepicker 를 구현했고,

두개의 피커에 각각 "시작날짜","종료날짜" 라는 밸류값을 주었다.

(그런데 이 두 글자값은 버튼에 뜨지 않는다... 날짜 선택시 바뀌는 value 만 표시)

정확한 이유는 모르겠지만 버튼에 아무 값도 없으면 위 코드가 먹지 않는다... 다른 해결방법이 있겠지만 일단 시작picker와 종료picker 가 있고, 버튼마다 초기값이 고정되어있다면 위 방법으로 해결할 수 있다.

 

 

 

완성된 모습 

4월 17일 ~ 20일 사이에 예약가능한 주차장의 Datepicker 모습이다. edate 선택값으로 maxDate가 지정된 것을 알수 있다.

 

 

간단해보였는데 해결하는데 꽤 오래걸린 기능이다.

datepicker 가 설정하기 까다롭긴하지만, 한번 해놓으면 아주 잘기능한다.

view 단에서 DB에 들어가면 안될 값들을 미리 걸러주니 얼마나 좋은가 ! (개-운)

여러 속성의 제어가 필요한 예약기능에서 꼭필요한 API인 것 같다.