[라이브러리] Datepicker

DatePicker란?

datepicker는 jQuery에서 제공하는 위젯 중 하나이며, 날짜를 다룰 때  UI 형식으로 쉽게 날짜를 선택하도록 도와주는 역할을 합니다. datepicker를 이용하면 많은 기능을 포함한 디자인된 달력을 간단한 코딩으로도 만들 수 있습니다. datepicker의 동작 순서는 먼저 datepicker메서드를 통해서 jQuery가 javascript 해석기로 datepicker를 요청합니다. 요청을 받은 javascirpt 해석기는 DOM에서 id가 datepicker인 요소를 찾습니다. 다시 javascript 해석기로 return 후 화면을 출력합니다.

 

1. 준비

jQuery는 Datepicker라는 날짜 선택창을 지원한다.

Datepicker를 사용하기 위해서는 jQuery와 jQuery-UI까지 설치해야 한다.

 

2. 사용하기

• 먼저 기본적으로 file을 import 해준다,
• input 요소를 만들고 자바스크립트로 $('.datepicker').datepicker(); 을 입력하면 날짜 선택창이 등장한다.

<link href='/datepicker/main.css' rel='stylesheet' />
<script src='/datepicker/main.js'></script>

<script>
	$(".datepicker").datepicker({
		prevText: "이전달",
		nextText: "다음달",
		monthNames: ["01","02","03","04","05","06","07","08","09","10","11","12"],
		dayNamesMin: ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],
		dateFormat: "yy.mm.dd",
		showMonthAfterYear: true,
		yearSuffix: "."
	});
</script>

<input class="datepicker">

 

3. 옵션

datepicker를 응용해서 구현할 수 있는 여러 가지 옵션 중에서 자주 사용하는 기능들입니다.

 

※ 참고

jquery.ui.datepicker-ko.js

0.00MB

jquery.datetimepicker.css

0.01MB