쌍용강북교육센터 국비 학원 Day 65일차 JQuery (Datepicker)

 

쌍용 강북 교육센터 국비학원 Day 65일차

 

JQuery의 Datepicker

Datepicker는 생년월일을 입력하는 등 날짜를 입력하는 input 태그에 텍스트로만 입력하지 않고 이벤트로 직관적인 달력을 띄워 날짜를 선택하는 코드로 jQuery에서 오픈소스로 제공하는 코드이다. 기본적으로 제공하는 것은 영어로 되어있지만 API 문서를 통해 옵션값을 설정하여 커스텀을 할 수 있다. (또한 함수를 이용해 날짜와 날짜사이의 기간을 지정할 수도 있다)

 

기본값

 

옵션값 변경하는 법

 

 

옵션값 설명

옵션값	값	설명
dateFormat	'yy-mm-dd' 와 같은 Date 형식	Input Display Format 변경
showOtherMonths	boolean	빈 공간에 현재월의 앞뒤월의 날짜를 표시
showMonthAfterYear	boolean	년도 먼저 나오고, 뒤에 월 표시
changeYear	boolean	콤보박스에서 년 선택 가능
changeMonth	boolean	콤보박스에서 월 선택 가능
showOn	button, text, both	button:버튼을 표시하고,버튼을 눌러야만 달력 표시됨. both:버튼을 표시하고,버튼을 누르거나 input을 클릭하면 달력 표시됨.
buttonImage	"경로명"	버튼 이미지 경로
buttonImageOnly	boolean	기본 버튼의 회색 부분을 없애고, 이미지만 보이게 함
buttonText	"선택"	버튼에 마우스 커서를 올렸을 때 표시되는 텍스트
yearSuffix	"년"	달력의 년도 부분 뒤에 붙는 텍스트
monthNamesShort	['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']	달력의 월 부분 텍스트
monthNames	['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월']	달력의 월 부분 Tooltip 텍스트
dayNamesMin	['일', '월', '화', '수', '목', '금', '토']	달력의 요일 부분 텍스트
dayNames	['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일']	달력의 요일 부분 Tooltip 텍스트
minDate	"-1M"	최소 선택일자(-1D:하루전, -1M:한달전, -1Y:일년전)
maxDate	"+1M"	최대 선택일자(+1D:하루후, +1M:한달후, +1Y:일년후)

 

 

커스텀 값