http://hompy.info/566


자바스크립트 라이브러리인 jQuery UI 위젯(Widgets)을 이용해서 달력(Calendar)과 날짜입력기(DatePicker)를 내 블로그나 홈페이지에 붙여 활용해보세요. 쓸만한 달력을 직접 만들려면 상당한 공을 드려야 하지만 jQuery UI 위젯을 활용하면 손쉽게 달력을 이용할 수 있을 뿐만 아니라 다양한 설정도 할 수 있으며 스킨도 비교적 손쉽게 교체할 수 있습니다. 하단 예제 소스 코드와 실행 화면을 참고하시면 사용법을 대략 짐작하실 수 있을 것입니다.
참고로 자바스크립트 프레임워크 라이브러리에는 Prototype, Script.aculo.us, jQuery, YUI, Dojo Toolkit, Ext JS, Google Web Toolkit, MooTools 등이 있습니다. 그리고 달력을 직접 제작해보려면 이전에 소개한 "PHP 또는 자바스크립트로 달력 만들기 소스 코드" 게시물을 참고하세요.

[jQuery UI 홈페이지]
http://ui.jquery.com/
http://ui.jquery.com/demos/datepicker

[jQuery UI DatePicker 실행 화면]
http://www.hompydesign.com/javascript/calendar/


[jQuery UI DatePicker 예제 소스 코드]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery UI Datepicker</title>
<link type="text/css" href="/ui/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/ui/ui.core.js"></script>
<script type="text/javascript" src="/ui/effects.core.js"></script>
<script type="text/javascript" src="/ui/effects.blind.js"></script>
<script type="text/javascript" src="/ui/effects.drop.js"></script>
<script type="text/javascript" src="/ui/effects.explode.js"></script>
<script type="text/javascript" src="/ui/ui.datepicker.js"></script>
<style>
body {font-size: 62.5%; font-family:"Dotum", "Tahoma";}
.body {width:440px; height:280px; border:1px solid #CCCCCC; padding:10px; background-color:#FAFDE2}
.demo {width:330px; border:1px solid #CCCCCC; padding:10px; background-color:#FFFFFF}
.text {font-size:12px; margin-right:4px; width:80px; line-height:20px;}
.datepicker_input1 {border:1px solid #999999; margin-right:4px; width:70px;}
.datepicker_input2 {border:1px solid #999999; margin-right:4px; width:70px;}
.datepicker1_div {margin-right:10px; float:left;}
</style>
<script type="text/javascript">
$.datepicker.setDefaults({
    //monthNames: ['년 1월','년 2월','년 3월','년 4월','년 5월','년 6월','년 7월','년 8월','년 9월','년 10월','년 11월','년 12월'],
    //dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
    //showMonthAfterYear:true,
    dateFormat: 'yy-mm-dd',
    buttonImageOnly: true,
    buttonText: "달력",
    buttonImage: "/ui/images/calendar.gif"
});
$(document).ready(function(){
    $("#datepicker2").val($.datepicker.formatDate($.datepicker.ATOM, new Date(2009, 1 - 1, 18)));
    $("#datepicker1").datepicker({
        inline: true,
        defaultDate: new Date(2009, 1 - 1, 18),
        onSelect: function(date) { $("#datepicker2").val(date); }
    })
    $("#datepicker2").datepicker({
        defaultDate: new Date(2009, 1 - 1, 27),
        showOn: "both", // focus, button, both
        showAnim: "blind", // blind, clip, drop, explode, fold, puff, slide, scale, size, pulsate, bounce, highlight, shake, transfer
        showOptions: {direction: 'horizontal'},
        duration: 200
    })
    $("#datepicker3").datepicker({
        defaultDate: new Date(2009, 1 - 1, 28),
        showOn: "both", // focus, button, both
        showAnim: "drop", // blind, clip, drop, explode, fold, puff, slide, scale, size, pulsate, bounce, highlight, shake, transfer
        showOptions: {direction: 'horizontal'},
        duration: 200
    })
    $("#datepicker4").datepicker({
        defaultDate: new Date(2009, 1 - 1, 29),
        showOn: "button", // focus, button, both
        showAnim: "explode",
        showOptions: {pieces: 4},
        duration: 500
    })
    $(".datepicker_input2").datepicker({
        defaultDate: new Date(2009, 1 - 1, 30),
        showOn: "both", // focus, button, both
        showAnim: "show", // show, fadeIn, slideDown
        duration: 200
    })
});
</script>
</head>
<body>
<div class="body">
<div class="demo">
<div id="datepicker1" class="datepicker1_div" /></div>
<span class="text">날짜</span> <input type="text" id="datepicker2" class="datepicker_input1"><br />
<span class="text">날짜</span> <input type="text" id="datepicker3" class="datepicker_input1"><br />
<span class="text">날짜</span> <input type="text" id="datepicker4" class="datepicker_input1"><br />
<span class="text">날짜</span> <input type="text" class="datepicker_input2"><br />
</div>
<br />
<span class="text">
jQuery UI Datepicker<br />
jQuery UI 날짜 입력기<br />
jQuery UI Calendar, 달력<br />
</span>
</div>
</body>
</html>

웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/566

+ Recent posts