datepicker 범위 선택

jQuery UI에 있는 Datepicker를 향상시킨 기능

내부 코드는 좀 복잡하긴 하나 그대로 쓰기만 한다면 문제는 없다.

input에 있는 값은 코드상에서 분배해주면 된다.

원문

http://benknowscode.wordpress.com/2012/11/20/selecting-ranges-with-the-jquery-ui-datepicker/

원문의 구현페이지

http://bseth99.github.io/projects/jquery-ui/4-jquery-ui-datepicker-range.html

github

https://github.com/bseth99/sandbox/blob/master/projects/jquery-ui/4-jquery-ui-datepicker-range.html

* 장점: 플러그인이 필요없다. ( 원문에 나오는 플러그인도 꽤 멋진 기능이나 플러그인 설치는 귀차느니..... )

numberOfMonths 기능으로 더 넓은 범위 선택도 가능하다

* 단점 : datetimepicker 플러그인과 충돌남............ 그외 문제는 없는 듯 허다..ㅜㅜ

(똑같이 만들었는데 자꾸 에러 나길래 뭐가 문제인가 봤더니..ㅠㅠ 아.. 2시간 삽질ㅠㅠ)

기존 스크립트와의 충돌 발생과 해당 기능 스펙아웃으로 내가 구현하고 싶은 대로 최적화는 하지 못하고 접어버렸지만

꽤 괜찮은 기능같아서 기록 겸 공유

* 기본적으로 사용하는 날짜 범위 선택하는 방법.

input 두개에 datepicker 걸어서 값 변경시마다 minDate, maxDate를 변경시키는 방법.

http://jqueryui.com/datepicker/#date-range

---

13.06.18 추가

input box 두개로 datepicker사용 시 

startdate 선택 후 바로 enddate로 focus를 가게 하고 싶었는데 .focus()를 하면 date창이 나왔다가 사라진다 -_-;;

$(".date").datepicker({
   onSelect: function() {
     window.setTimeout( $.proxy(function() {
       $(this).next(".date").focus();
     },this),10);
   }
 });

이렇게 두면 포커스이동하고 date창이 떠있음 :) 

http://stackoverflow.com/questions/13218331/jquery-ui-datepicker-closes-on-next-focus 발췌