jQuery - datepicker()

📌 datepicker()

jQuery UI의 Datepicker는 입력 필드에 날짜 선택 기능을 추가하는 위젝입니다. 사용자가 날짜를 쉽게 선택할 수 있도록 달력 인터페이스를 제공하여 사용성이 좋고 직관적입니다.

제이쿼리 플러그으로 만들어 졌으니 제이쿼리 오픈소스와 css파일과 jsp파일을 import 해야합니다.

---

📝 기본사용법

1. jQuery 및 jQuery UI 추가 :
   jQuery와 jQudry UI 스크립트 파일을 HTML에 포함해야 합니다. 또한, jQuery UI 스타일 시트를 추가하여 캘린더 UI가 올바르게 스타일링 됩니다.

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

2. HTML 입력 필드 추가 :
   날짜 선택 기능을 적용할 입력 필드를 작성합니다.

<input type="text" id="datepicker">

3. Datepicker 초기화 :
   jQuery를 사용해 Datepicker를 초기화합니다.

$(document).ready(function(){
	$("#datepicker").datepicker();
});

---

📝 추가 옵션 및 설정

• 기본 날짜 설정

$("#datepicker").datepicker({
	defaultDate : "+1w" // 오늘로부터 1주일 뒤의 날짜로 설정
});

• 날짜 형식 변경

$("#datepicker").datepicker({
	dateFormat : "yy-mm-dd" // 예 : 2024-11-11
});

• 최소 / 최대 날짜 설정

$("#datepicker").datepicker({
	minDate : new Date(),	// 오늘 이후 날짜만 선택 가능
  	maxDate : "+1m"	// 오늘로부터 한 달 뒤까지만 선택 가능
});