정리jQueryUI

jQuery UI 살펴보기 Datepicker

jQueryUI

jQuery는 자바스크립트 라이브러리로서 웹 화면에서의 DOM 제어가 수월하기 때문에 웹 개발의 생산성을 향상 시킬 수 있다.

거기에서 파생되서 나온 jQuery UI(User Interface)는 jQuery 기반의 GUI 라이브러리 이다.

jQuery UI 를 사용하면 마우스를 활용해서 드래그 및 드롭다운의 상호작용 효과를 만들 수 있고 버튼이나 체크박스, 데이트픽커 같은

사용자가 이용할 때 보기도 좋고 쓰기도 좋은 위젯들과 여러가지 효과 그리고 유틸리티를 쉽게 사용할 수 있다.

그 중에서도 Datepicker는 날짜 선택을 편하게 해줄 수 있는 위젯으로서 그 활용도가 굉장히 높다.

어느 사이트나 날짜를 선택하는데 있어서 이 Datepicker 위젯을 많이 사용하는 것 같다. 그래서 이번에 한번 이 위젯의

API를 한번 정리해보려고한다. 정리라고 해봐야 공식 문서에 있는것을 한번 써보고 올리는 것 밖에 안된다. 그래도 해보자.

공식 홈페이지 가보면 정말 많은 기능이 있다.

사용법

일단 jQuery UI를 사용하려면 기존의 jQuery 라이브러리와 jQuery UI 의 css를 적용해 주어야 사용할 수 있다.

1
2
3
4
<!-- 3가지 라이브러리 추가 -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

간단하게 Datepicker 위젯의 모습을 살펴보면 이렇게 해주면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>datepicker demo</title>
  <!-- 3가지 라이브러리 추가 -->
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>

<div id="datepicker"></div>

<script>
$( "#datepicker" ).datepicker();
</script>

</body>
</html>

위처럼 간단하게 달력 형태의 모습을 띄는 위젯이 생성되었다. 그런데 이렇게만 놔두면 쓸모가 없으니 여러가지 option과 event가 존재한다.

지금부터 그것을 하나씩 정리해보자.

Default Options

옵션을 정리하기 전에 Global Options를 적용해 줄 수가 있다. datepicker를 사용하면서 기본옵션을 아래와 같이 해줄수가 있다.

1
2
3
4
5
6
$.datepicker.setDefaults({
  showOn: "both",
  buttonImageOnly: true,
  buttonImage: "calendar.gif",
  buttonText: "Calendar"
});

여기에서는 설명하지 않지만 Datepicker를 한글화로 해서 쓸 수가 있다. 그건 검색해서 알아보자.

Options

  • altfield 옵션
    • datepiker에서 선택한 날짜로 업데이트 하기 위한 옵션이다
  • altformat 옵션
    • 위의 altfield에서 선택한 날짜를 업데이트 할 때 format을 변경하기 위한 옵션이다.

음 설명이 왜이렇게 어렵지.. 설명보다 코드로 확인하는게 아마 더 이해하기 쉬울 것 같다.

아래 altField에 선택된 옵션 값이 들어가는데 format을 지정해주면 해당 format으로 수정되어서 값이 들어간다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>datepicker demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>

<div>
  <input type="text" id="inputDate" placeholder="datepicker선택">
</div>

<input type="text" id="alt_date" placeholder="altField 수정될 내용">

<script>
$( "#inputDate" ).datepicker({
	altField: "#alt_date",
  	altFormat: "yy-mm-dd"
});
</script>

</body>
</html>

앞으로는 전체 코드말고 script 부분만 올린다.

  • appendText 옵션
    • 이 옵션은 선택된 datepicker 날짜 값 필드 다음에 추가로 텍스트를 넣는다
    • 예를 들어서 사용자에게 날짜를 입력받을 때 꼭 특수한 형식으로 입력하라고 할때 사용하기 좋다.
1
2
3
4
5
6
<script>
$( "#inputDate" ).datepicker({
	dateFormat: "yy-mm-dd",
  	appendText: "yyyy-mm-dd 형식으로 입력"
});
</script>
  • autoSize 옵션
    • true로 설정하면 입력 필드의 크기가 자동으로 조정된다. 크기는 형식에 맞는 크기로 조정되는 것 같다.
1
2
3
4
5
<script>
$( "#inputDate" ).datepicker({
  autoSize: true
});
</script>
  • buttonImage 옵션
    • “showOn” 옵션이 “button” 또는 “both”로 설정된 경우 datepicker를 표시하는데 사용할 이미지의 URL 옵션
1
2
3
4
5
<script>
$( "#inputDate" ).datepicker({
  buttonImage: "/images/datepicker.gif"
});
</script>
  • buttonImageOnly 옵션
    • 이 옵션은 buttonImage 옵션이 설정된 경우에만 사용된다.
1
2
3
4
5
<script>
$( "#inputDate" ).datepicker({
  buttonImageOnly: true
});
</script>
  • buttonText 옵션
    • 이 옵션 또한 “showOn” 옵션이 button이나 both 로 설정된 경우에만 사용가능하고 버튼에 텍스트를 표시하는 옵션이다.
1
2
3
4
5
<script>
$( "#inputDate" ).datepicker({
  buttonText: "Choose"
});
</script>
  • changeMonth 옵션
    • 드롭다운 박스로 월을 변경할 수 있게 해주는 옵션 default 값은 false이고 true 값을 지정해주면 생성된다.
1
2
3
4
5
<script>
$( "#inputDate" ).datepicker({
  changeMonth: true
});
</script>

확인해보면 월을 변경할 수 있게 셀렉트 박스(드롭다운)가 생성 되었다.

  • changeYear 옵션
    • changeMonth 옵션과 똑같다. year을 변경할 수 있게 드롭다운으로 보여준다. default 값은 false이고 true 값을 지정해주면 된다.
1
2
3
4
5
<script>
$( "#inputDate" ).datepicker({
  changeYear: true
});
</script>
  • closeText 옵션
    • datepicker를 닫기 버튼의 Text를 수정하는 옵션이다. default로는 “Done” 이라고 되어있는데 옵션을 통해 수정할 수 있다.
    • 이 옵션을 사용하기 전에 showButtonPanel 이라는 옵션을 true 값으로 설정해 주어야한다. 이 옵션은 버튼 패널을 보이게한다.
1
2
3
4
5
6
<script>
$( "#inputDate" ).datepicker({
	showButtonPanel: true,
  	closeText: "Close"
});
</script>
Share