jquery datepicker 사용

우선 추가할 script
jquery-1.3.1.js
jquery-ui-personalized-1.6rc6.js
jquery.datepick-ko.js

추가할 css
ui.all.css
ui.all.css 안에는 다른 css파일을 import되어있기 때문에 다른 css도 다운받아야함.

$(function() {
    $('#StartDayField').datepicker(
   {
       showOn: 'both',
       buttonImage: '/_layouts/images/calendar.gif',
       buttonImageOnly: true,
       dateFormat: 'yy-mm-dd',
       beforeShow: customRange
   });

 $('#EndDayField').datepicker(
   {
       showOn: 'both',
       buttonImage: '/_layouts/images/calendar.gif',
       buttonImageOnly: true,
       dateFormat: 'yy-mm-dd',
       beforeShow: customRange
   });
});

function customRange(input) {
    return {   
        minDate: (input.id == "EndDayField" ? $('#StartDayField').datepicker('getDate') : null),
        maxDate: (input.id == "StartDayField" ? $('#EndDayField').datepicker('getDate') : null)
    };
}
input box 두개를 만들고 시작날짜의 id 는 StartDayField 마지막날짜를 EndDayField 로 한다.

이런식으로 나오게 되는데 좋은 기능?은 시작날짜 선택했을때 마지막날짜가 시작날짜보다 앞을
선택할수 없게 코딩할 필요없이 datepicker에서 구분해준다. 마지막 날짜도 마찬가지로 됨.