jQuery UI datepicker 사용법 - 삽질중인 개발자

- jQuery UI datepicker 사용법 및 옵션 정리 -

 

jQuery Ui 중에서 datepicker는 간단한 option을 통한 캘린더 구현이 가능한 사용하기 편한 라이브러리다.

한글 캘린더 또한 구현이 가능하다. 

(좀 더 스타일리쉬한 캘린더를 원하면 bootstrap datepicker 를 클릭)

 

 

다운로드 사이트 ( jQuery UI 공식 페이지 )

이미 기존에 사용되고 있는 사이트에서 jQuery UI 의 모든 기능을 다운 받아서 사용하면 다른 css나 js와 충돌이 날 가능성이 있다.

따라서 원하는 부분만 설정해서 다운받도록 한다.

 

Download Builder | jQuery UI

 

 

1. JQuery UI datepicker 디폴트 옵션 세팅

대부분의 프로젝트에서는 모든 캘린더의 통일성을 위해 보통 이런식으로 공통 설정을 해둔다.

jQuery UI datepicker를 사용하면서 아래의 설정만 해줘도 거의 다 된거다.

$.datepicker.setDefaults({
        dateFormat: 'yy-mm-dd',	//날짜 포맷이다. 보통 yy-mm-dd 를 많이 사용하는것 같다.
        prevText: '이전 달',	// 마우스 오버시 이전달 텍스트
        nextText: '다음 달',	// 마우스 오버시 다음달 텍스트
        closeText: '닫기', // 닫기 버튼 텍스트 변경
        currentText: '오늘', // 오늘 텍스트 변경
        monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],	//한글 캘린더중 월 표시를 위한 부분
        monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],	//한글 캘린더 중 월 표시를 위한 부분
        dayNames: ['일', '월', '화', '수', '목', '금', '토'],	//한글 캘린더 요일 표시 부분
        dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'],	//한글 요일 표시 부분
        dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],	// 한글 요일 표시 부분
        showMonthAfterYear: true,	// true : 년 월  false : 월 년 순으로 보여줌
        yearSuffix: '년',	//
        showButtonPanel: true,	// 오늘로 가는 버튼과 달력 닫기 버튼 보기 옵션
//        buttonImageOnly: true,	// input 옆에 조그만한 아이콘으로 캘린더 선택가능하게 하기
//        buttonImage: "images/calendar.gif",	// 조그만한 아이콘 이미지
//        buttonText: "Select date"	// 조그만한 아이콘 툴팁
    });
    

 

위의 옵션을 적용하면 나오는 캘린더

 

위에는 자주 쓰는 옵션이고 다른 옵션을 보기를 원한다면 https://api.jqueryui.com/datepicker/ 에서 확인 후 사용하면 된다.

 

2. JQuery UI datepicker 각각의 캘린더 옵션 세팅

위에서 디폴트 옵션을 설정해서 아래는 각각 캘린더의 특성에 맞는 옵션을 선택하면 된다.

$("#datepicker1").datepicker({
	maxDate : "+1m +1w",	//선택할 수 있는 최대 날짜  +1m +1w 은 1달 1주일 뒤 까지 선택가능  [+,-][숫자][y,m,w,d] 
	minDate : "-1y"	//선택할 수 있는 최소 날짜 
});

 

 

3. jQuery UI datepicker 함수

 

jQuery UI datepicker에서 자주쓰는 함수 두개이다. 

$( "#datepicker1" ).datepicker( "setDate", "2020-02-01" );	//날짜 변경

$( "#datepicker1" ).datepicker( "getDate" );	//현재 선택되어 있는 날짜 가져오기 (Date 형으로 반환)

 

 

보통 캘린더를 사용하는 경우 날짜에 관한 유틸 파일도 가지고 있으면 더욱 사용하기 편하다.

 

 

---

Date 관련 유틸 모음