jqueryUI datepicker 날짜 설정하기

jqueryUI 에 포함되어 있는 datepicker 의 사용법을 알아봅니다.

<input type="text" id="datepicker1" /> 으로 자리잡아주고, 스크립트에서 초기화를 해 주면 끝입니다.

<script> 
    $(function() {   
        $( "#datepicker1" ).datepicker();
    }); 
</script>

이렇게만 하면, 데이트피커 사용할 수 있습니다.

기본 날짜 표시 포맷이 우리나라와 맞지 않아 아래처럼 옵션을 줄 수 있습니다.

$( "#datepicker1" ).datepicker( "option", "dateFormat", "yy-m-d" );

input 박스에 클릭하면, 달력이 뜨고, 날짜를 선택하면, input 박스에 값이 입력됩니다.

그럼, 데이터피커로 잡혀있는 input 에 날짜값을 입력하려면 어떻게 해야할까요?

스크립트로 설정을 해 줄 수 있습니다.

페이지 로딩이 끝난 후, #datepicker1 의 값을 2013년 1월 22일 로 설정하고 있습니다.

<script> 
    $(function() {   
        var x = new Date(2013, 1, 22, 0, 0, 0, 0);
        $( "#datepicker1" ).datepicker( "setDate", x );
    }); 
</script>

자바스크립트의 Date object를 만들어 setDate 옵션에다 인자로 넣어줍니다.

끝...