1. 정의
jQuery에서 제공하는 달력 형식의 UI 위젯 중 하나.
날짜를 다룰 때 UI 형식으로 쉽게 날짜를 선택하도록 도와줌.
2. 형식 소스
1) CDN 호스트를 사용하는 경우
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<p>Date : <input type="text" id="datepicker"></p>
</body>
</html>
|
cs |
링크 형식을 stylesheet로 설정하고, script 사이트 링크를 거는 CDN 호스트를 사용했다.
2) 직접 내려받아 사용하는 경우
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="./js/jquery-ui.css">
<script src="./js/jquery-1.8.3.js"></script>
<script src="./js/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<p>Date : <input type="text" id="datepicker"></p>
</body>
</html>
|
cs |
프로젝트 내 js 폴더에 직접 다운받아 import 해줬다.
기본 테마 디자인이다.
기호에 따라 테마를 다운받아 변경할 수도 있고, 달력의 속성을 변경할 수도 있다.
3. 테마 변경
http://jqueryui.com/themeroller/ 사이트 접속 > Gallery > 원하는 테마 Download 하여 경로 안에 -ui.js, -ui.css 파일을 덮어쓰기 한다.
적용된 테마 디자인 화면이다.
4. datepicker 속성 변경
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 |
<html>
<head>
<script type="text/javascript" src="./js/script.js"></script>
<link rel="stylesheet" href="./js/jquery-ui.css">
<script src="./js/jquery-1.8.3.js"></script>
<script src="./js/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$("#datepicker").datepicker({
dateFormat : "yy-mm-dd",
monthNamesShort : ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
dayNamesMin : ['일', '월', '화', '수', '목', '금', '토'],
changeMonth : true,
changeYear : true,
yearRange : "c-70:c+70",
showMonthAfterYear : true
});
});
</script>
</head>
<body>
|
cs |
함수 안에 여러 옵션을 설정해주면 datepicker의 속성이 변경된다.
5. datepicker가 요청되는 순서
ㄱ. datepicker를 요청
ㄴ. id가 datepicker인 요소를 받음
ㄷ. return 후
ㄹ. 화면으로 출력
