Javascript/jQuery

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

개발 N년차 2020. 1. 5. 21:38
반응형

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

 

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

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

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

 

 

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

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

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

 

 

Download Builder | jQuery UI

Download Builder

jqueryui.com

 

 

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 관련 유틸 모음

 

 

 

반응형