[jQuery UI] Date Picker

# 목차

1. 사용목적
2. Date Picker 란?
3. 플러그인 홈페이지
4. 사용을 위한 설치
5. 사용을 위한 설정(css, js)
6. 사용을 위한 레이아웃 구축(html)
7. 사용을 위한 구문 작성(js) 그리고 결과
8. 주로 사용하는 옵션

---

1. 사용목적

날짜를 선택해야하는 경우(예 : 출입국 일자 설정, 생년월일 선택, 배송일자 선택)를 캘린더형식의 UI로 다루어야 할때 주로 사용된다.

 

 

 

 

 

2. Date Picker 란?

Jquery UI(User Interface)에서 제공하는 캘린더로, 따로 하드코딩하지 않아도 이미 제작된 캘린더를 이용할 수 있다.

커스터마이징이 용의한 편이며, 브라우저나 모바일에서 편리하게 캘린더를 사용할 수 있다.

(제이쿼리 유아이에서 제공하는 위잿개념으로 생각할 수 있다.)

 

※ jQuery UI 란?

jQuery UI는 jQuery JavaScript 라이브러리를 기반으로 구축된 선별된 사용자 인터페이스 상호 작용, 효과, 위젯 및 테마 세트입니다. 

- 출처

https://jqueryui.com/

 

 

 

 

 

3. 플러그인 홈페이지

해당 홈페이지에서 'Datepicker' 플러그인을 사용하는 방법, 예제 등을 확인할 수 있다.

https://jqueryui.com/datepicker/

Datepicker | jQuery UI

 

 

 

 

 

4. 사용을 위한 설치

해당 플러그인을 사용하기 위해선 설치가 필요하다.

현재 홈페이지 기준으로는 다운로드 에셋만 기재가 되어 있어, 해당방법으로 설치를 진행하며

추후 다른 설치 방법이 있다면 추가하도록 해보겠다(찾아야지 샅샅)

다운로드 진행시 필요한 위잿만 선택해 다운로드가 가능하니, 필요사항을 체크하여 다운받도록 한다.

   1. Download assets : 플러그인 파일을 다운로드하여 프로젝트 내 배치

 

 

 

 

 

5. 사용을 위한 설정(css, js)

'Jquery UI' 의 'Download Buillder' 에서 다운받은 소스로 진행한다.

 

[Installation] 데이트피커 사용을 위해 필요 소스를 체크하여 다운받는다.

- Download assets

해당 페이지에 들어가면 원하는 요소를 커스터마이징이 가능하나, 선택없이 한번에 받을 수 도 있다.

<link
  rel="stylesheet"
  href="내 프로젝트 경로/jquery-ui.css"
/>

<script src="내 프로젝트 경로/jquery-3.6.0.min.js"></script>
<script src="내 프로젝트 경로/jquery-ui.min.js"></script>

datepicker를 사용하기 위해선 'Jquery.js'와 'Jquery-ui.js' 설치가 필수이다
'Jquery-ui.css'는 화면 구성을 봐야 하기 때문에 필수이나, 개인의 선택의 따라 넣지 않을 수도 있다.(하지만 필자는 꼬옥 넣는다..)

 

 

 

 

 

6. 사용을 위한 레이아웃 구축(html)

[Initialize via HTML] html로 레이아웃을 설정

<!-- Default -->
<input type="text" id="datepicker">

<!-- Inline -->
<div id="datepicker"></div>

함수를 호출하기 위해 셀렉터명(id, class 등)을 작성해주며, 각 상황의 따라 알맞은 태그에 셀렉터를 지정하도록 한다.
(Default : 클릭시 호출 || Inline : 인라인 뷰 호출) 

 

 

 

 

 

7. 사용을 위한 구문 작성(js) 그리고 결과

[Intialize via jacascript] 마지막으로 'datepicker' 구문을 작성하여 화면을 확인한다.

<script>
$(function(){
	// 기본형
	$( "#datepicker" ).datepicker();

	// 옵션 사용 호출
	$( "#datepicker" ).datepicker({
		showOtherMonths: true,
		selectOtherMonths: true
		.
		.
	});
});
</script>

 

! 결과화면 확인 !

 

 

 

 

 

 

 

7. 주로 사용하는 옵션

$(function(){
	$(target).datepicker({
        showButtonPanel:true,				// 버튼 뷰('today', 'done')
        showOtherMonths:true,				// 당월 외 월 보여짐 여부
        selectOtherMonths:true,				// 당월 외 월 선택 여부
        changeMonth:true,				// '월' 셀렉트 박스
        changeYear:true,				// '년도' 셀렉트 박스
        showWeek:true,					// '주' 사용 여부
        numberOfMonths:3,				// 한 판에 보여질 달력 갯수(2개 이상 입력가능)

        // 아이콘형 버튼 호출
        showOn:"button",				// 버튼 활성화
        buttonImage:"images/calendar.gif",		// 버튼 이미지 불러오기
        buttonImageOnly:true,				// 버튼 이미지 사용 여부
        buttonText:"Select date"			// 버튼 텍스트 설정

        // 최소, 최대 일자 설정
        // 'D' for days, 'W' for weeks, 'M' for months, or 'Y' for years
        minDate: -20, 
        maxDate: "+1M +10D"
	});
});