다운로드 진행시 필요한 위잿만 선택해 다운로드가 가능하니, 필요사항을 체크하여 다운받도록 한다.
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'는 화면 구성을 봐야 하기 때문에 필수이나, 개인의 선택의 따라 넣지 않을 수도 있다.(하지만 필자는 꼬옥 넣는다..)
$(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"
});
});