[jQuery] jQuery UI 로 Datepicker(날짜입력기) 구현

기타/jQuery 2010. 2. 9. 14:00

jQuery UI 웹사이트 :
http://jqueryui.com/

Components 다운로드 : jquery UI 모듈 다운로드.
http://jqueryui.com/download

Demo : datepicker 및 기타 컴포넌트 다운로드.
http://jqueryui.com/demos/datepicker/

<!doctype html>
<html lang="en">
<head>
    <title>jQuery UI Datepicker - Default functionality</title>
    <link type="text/css" href="http://finewoo.tistory.com/themes/base/ui.all.css" rel="stylesheet" />
    <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
    <script type="text/javascript" src="../../ui/ui.core.js"></script>
    <script type="text/javascript" src="../../ui/ui.datepicker.js"></script>
    <link type="text/css" href="../demos.css" rel="stylesheet" />
    <script type="text/javascript">
    $(function() {
        $("#datepicker").datepicker();
    });
    $(function() {
        $("#datepicker1").datepicker({showOn: 'button',
buttonImage: 'images/calendar.gif',
buttonImageOnly: true});
    });
    $(function() {
        $('#datepicker2').datepicker({
            changeMonth: true,
            changeYear: true
        });
    });
    </script>
</head>
<body>

<div class="demo">

<p>Date: <input type="text" id="datepicker"></p>
<p>Date1: <input type="text" id="datepicker1"></p>
<p>Date2: <input type="text" id="datepicker2"></p>

</div>

</body>
</html>