jQueryUI에서 지원하는 달력 컴포넌트를 이용하여 TEXT태그에 값넣어보기

이번에는 datepicker를 이용하여  INPUT 태그에 연월일을 넣어보도록 하겠음

우선 text태그를 하나 넣어주고 직접 입력을 불가능하게 막아보도록 하자

readonly="readonly" 옵션을 주어서!! ㅎ

HTML코드

<input id="dateText" type="text" readonly="readonly" />

스크립트코드

$(function(){
		$( "#dateText" ).datepicker({
			//달력에 일자 선택시 text태그에 들어갈 연월일 포맷
		    dateFormat: 'yy-mm-dd',
		    // changeYear, changeMonth 을 true로 주면 연/월 부분을 
		    // selectbox로 날짜 이동가능
		    changeYear: true,
		    changeMonth: true
	     });
})

연월 selectbox를 만들기 싫으면 changeYear, changeMonth 옵션을 빼버리자~

기본적으로는 

$( "#dateText" ).datepicker({});

이런식으로만 줘도 잘 나옴..

실행화면

1. 초기화면

2. text태그 클릭화면

3. datepicker selectbox 선택

4. 지정하면 달력변경

5. 일자 클릭후 화면

참 간단하다 ㅋㅋㅋ