jQuery UI로 달력과 날짜입력기(DatePicker)를 붙여보기.

ASP.NET 2009. 1. 29. 11:31
자바스크립트 라이브러리인 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"
});
$(d0cument).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>

'ASP.NET' 카테고리의 다른 글

테이블에 스크롤 바 넣는 방법  (0) 2009.04.15
ASP.NET에서 Trace를 이용한 웹페이지 속도 및 성능 측정  (0) 2009.01.29
ListView Sort  (0) 2009.01.09
GET Method 길이 제한 (최대 URL 길이 )  (0) 2008.12.31
새로워진 IIS 7.0으로의 이전  (0) 2008.12.03
Posted by 퓨전마법사
,

티스토리툴바