제이쿼리 달력 달기 (datepicker)

 

 

 

제이쿼리 달력 플러그인 중에 많이 쓰이는 달력, datepicker를 소개해 드릴까 합니다.

먼저 http://jqueryui.com/download 에서 "datepicker"를 검색합니다.

 

 

 

 

플러그인을 다운받은 후 링크만 시켜주면 되는데요.
JQuery Core 파일은 반드시 그 위에 external 시키시고, <script>안에 태그를 선택할 수 있는 selector를 지정합니다.
그럼 default로 사용 가능하죠.

 

datepicker에 옵션을 추가해 줄 수 있는데 그 방법은 두가지가 있습니다.

constructor를 만들고 option을 넣는 법.
constructor를 만들때 argument로 {} 안에 option을 넣는 법

 

*옵션

 

1.animation
animation의 종류에는 "show"."slideDown"."fadeIn"."blind"."bounce"."clip"."drop"."fold"."slide" 이며,
기본값은 "show" 입니다.

 

2.다른달 보여주거나 선택하기
showOtherMonths와 selectOtherMonths를 활용해 다른달을 보여주거나 선택할 수 있습니다.
showButtonPanel=true/false를 지정하면 달력 하단에 버튼이 나오게 안나오게 할 수 있습니다.

 

3.년,달 변경하기
changeMonth,changeYear 지정에 따라 년,월이 select 박스로 변경되어 값을 바꿀수 있게 합니다.

 

4.일자 포멧 지정
dateFormat은 국가나 사용프로그램에 맞게 지정가능합니다.
yy:년도, mm:원, dd:일

yy는 4자리 년도를 표시하고,
mm이 한자리 월이면 앞에 "0"이 붙고,, m이면 한자리 월일때 "0"이 붙지 않습니다.
dd도 mm과 같은 원리입니다.

예)
yy/mm/dd = 2015/07/09
yy-mm-dd = 2015-07-09
yy/MM/dd = 2015/July/09
yy/M/dd  = 2015/Jul/09

 

5.아이콘 달기
달력 버튼을 보이고 안보이게하는 옵션으로, 버튼 이미지가 맘에 안들면 바꿀수 있습니다.

 

참고로 헤더 부분에 년월의 위치를 바꾸려면
jquery-ui.js 파일에서 // year selection 섹션과 // month selection 의 위치를 바꿔주세요.