jQuery UI 날짜선택기 datepicker

jQuery UI 날짜 선택기
jQuery UI 달력
초간단 자바스크립트 달력

1 개요

jQuery UI를 가지고 간단하게 날짜 선택기(달력)을 구현할 수 있다.
아래 소스는 YYYY-MM-DD 형식(예: 2012-03-20)을 적용한 것 외에는 기본형이다.

2 날짜 1개

<!DOCTYPE html>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
<script>
$(function() {
$( "#datepicker1" ).datepicker({
  dateFormat: 'yy-mm-dd'
});
});
</script>
<p>생년월일: <input type="text" id="datepicker1"></p>

3 날짜 2개 (예: 조회기간)

<!DOCTYPE html>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
<script>
$(function() {
$( "#datepicker1 #datepicker2 " ).datepicker({
  dateFormat: 'yy-mm-dd'
});
});
</script>
<p>조회기간: <input type="text" id="datepicker1"> ~ <input type="text" id="datepicker2"></p>

4 날짜 2개, 한국어로

<!DOCTYPE html>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
<script>
$(function() {
$( "#datepicker1 #datepicker2 " ).datepicker({
  dateFormat: 'yy-mm-dd',
  prevText: '이전 달',
  nextText: '다음 달',
  monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
  monthNamesShort: ['1','2','3','4','5','6','7','8','9','10','11','12'],
  dayNames: ['일','월','화','수','목','금','토'],
  dayNamesShort: ['일','월','화','수','목','금','토'],
  dayNamesMin: ['일','월','화','수','목','금','토'],
  showMonthAfterYear: true,
  yearSuffix: '년'
});
});
</script>
<p>조회기간: <input type="text" id="datepicker1"> ~ <input type="text" id="datepicker2"></p>