개발하냥
DatePicker에 대해 알아보자.
우선 plugin을 다운받고 <head>안에 넣어준다.
JSP페이지
필자는 JSP페이지 내부에 스크립트를 작성하지 않고 JS파일을 작성하여 주입.
datepicker.js 작성
$(function(){ var cal = { closeText : "닫기", prevText : "이전달", nextText : "다음달", currentText : "오늘", changeMonth: true, // 월을 바꿀 수 있는 셀렉트 박스 changeYear: true, // 년을 바꿀 수 있는 셀렉트 박스 monthNames : [ "1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월" ], monthNamesShort : [ "1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월" ], dayNames : [ "일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일" ], dayNamesShort : [ "일", "월", "화", "수", "목", "금", "토" ], dayNamesMin : [ "일", "월", "화", "수", "목", "금", "토" ], weekHeader : "주", dateFormat : "yy-mm-dd", firstDay : 0, isRTL : false, showMonthAfterYear : true, // 연,월,일 순으로 yearSuffix : '', showOn: 'both', // 텍스트와 버튼을 함께 보여준다 buttonImage:'/resources/image/calendar.png', //날짜 버튼 이미지 buttonImageOnly: true, showButtonPanel: true, dateFormat:"yy-mm-dd", }; $("#regDate").datepicker(cal); $('img.ui-datepicker-trigger').css({'cursor':'pointer', 'margin-left':'5px'}); //아이콘(icon) 위치 $('img.ui-datepicker-trigger').attr('align', 'absmiddle'); });
그외 자주쓰는 옵션들.
minDate: '0' : 오늘 날짜 이후로
numberOfMonths: [2,3] : 여러개월 달력 표시(숫자 가변값)
showAnim: 'slide' : 달력 애니메이션효과
showCurrentAtPos: '3' : 여러 달력을 한꺼번에 띄울경우 시작월의기준 / 0이면 현재, 3이면 3개월후
showOtherMonths: true : 매월 빈칸에 이전달, 다음달 날짜 출력여부
showWeek: true : 주수 출력여부
stepMonths: '3' : 달력에서 좌우 선택시 이동할 개월 수
