[Jquery UI] Datepicker 간단 사용법

Jquery UI 공식사이트인 https://jqueryui.com 에서 모든 Example과 API문서를 보고,

실무에서 많이 쓰일 것 같은 내용만 손쉽게 사용 할 수 있도록 정리해보았습니다.

현재 최신 버전인 1.12.1 버전 기준입니다.

기본 설정

5~7라인에는 Jquery UI를 사용하는데 필요한 js파일과 css파일이 선언되어 있고,

13라인에는 input객체를 datepicker로 사용하겠다고 선언되어있다.

13라인이 없다면 10라인이 input은 그냥 텍스트를 입력받는 input이지만 13라인이 있다면 input을 클릭했을 때 달력이 출력되고, 날짜를 선택하면 선택한 날짜가 input에 입력된다.

<!DOCTYPE html>

<head>

</head>

<body>

일자: <input type="text" id="datepicker">

$("#datepicker").datepicker();

</script>

</body>

</html>

datepicker 별 옵션 설정

아래의 코드는 각 datepicker 별로 옵션을 설정하는 방법이다.

datepicker 별로 옵션이 달라야 하는 경우에만 이 방법을 사용하는 것이 좋다.

<!DOCTYPE html>

<head>

<style>

/*datepicer 버튼 롤오버 시 손가락 모양 표시*/

.ui-datepicker-trigger{cursor: pointer;}

/*datepicer input 롤오버 시 손가락 모양 표시*/

.hasDatepicker{cursor: pointer;}

</style>

</head>

<body>

일자: <input type="text" id="datepicker">

$(function() {

//input을 datepicker로 선언

$("#datepicker").datepicker({

dateFormat: 'yy-mm-dd' //Input Display Format 변경

,showOtherMonths: true //빈 공간에 현재월의 앞뒤월의 날짜를 표시

,showMonthAfterYear:true //년도 먼저 나오고, 뒤에 월 표시

,changeYear: true //콤보박스에서 년 선택 가능

,changeMonth: true //콤보박스에서 월 선택 가능

,showOn: "both" //button:버튼을 표시하고,버튼을 눌러야만 달력 표시 ^ both:버튼을 표시하고,버튼을 누르거나 input을 클릭하면 달력 표시

,buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif" //버튼 이미지 경로

,buttonImageOnly: true //기본 버튼의 회색 부분을 없애고, 이미지만 보이게 함

,buttonText: "선택" //버튼에 마우스 갖다 댔을 때 표시되는 텍스트

,yearSuffix: "년" //달력의 년도 부분 뒤에 붙는 텍스트

,monthNamesShort: ['1','2','3','4','5','6','7','8','9','10','11','12'] //달력의 월 부분 텍스트

,monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'] //달력의 월 부분 Tooltip 텍스트

,dayNamesMin: ['일','월','화','수','목','금','토'] //달력의 요일 부분 텍스트

,dayNames: ['일요일','월요일','화요일','수요일','목요일','금요일','토요일'] //달력의 요일 부분 Tooltip 텍스트

,minDate: "-1M" //최소 선택일자(-1D:하루전, -1M:한달전, -1Y:일년전)

,maxDate: "+1M" //최대 선택일자(+1D:하루후, -1M:한달후, -1Y:일년후)

});

//초기값을 오늘 날짜로 설정

$('#datepicker').datepicker('setDate', 'today'); //(-1D:하루전, -1M:한달전, -1Y:일년전), (+1D:하루후, -1M:한달후, -1Y:일년후)

});

</script>

</body>

</html>

전체 datepicker 옵션 일괄 설정

아래의 코드는 모든 datepicker에 대한 옵션을 일괄적으로 설정하는 방법이다.

한번의 설정으로 datepicker, datepicker2의 옵션을 모두 설정할 수 있다.

Tiles 프레임워크를 이용하거나 공통 js파일에 아래와 같이 옵션을 일괄적으로 설정하면 시스템의 모든 datepicker에 대한 옵션을 한곳에서 설정할 수 있다.

<!DOCTYPE html>

<head>

<style>

/*datepicer 버튼 롤오버 시 손가락 모양 표시*/

.ui-datepicker-trigger{cursor: pointer;}

/*datepicer input 롤오버 시 손가락 모양 표시*/

.hasDatepicker{cursor: pointer;}

</style>

</head>

<body>

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

To: <input type="text" id="datepicker2">

$(function() {

//모든 datepicker에 대한 공통 옵션 설정

$.datepicker.setDefaults({

dateFormat: 'yy-mm-dd' //Input Display Format 변경

,showOtherMonths: true //빈 공간에 현재월의 앞뒤월의 날짜를 표시

,showMonthAfterYear:true //년도 먼저 나오고, 뒤에 월 표시

,changeYear: true //콤보박스에서 년 선택 가능

,changeMonth: true //콤보박스에서 월 선택 가능

,showOn: "both" //button:버튼을 표시하고,버튼을 눌러야만 달력 표시 ^ both:버튼을 표시하고,버튼을 누르거나 input을 클릭하면 달력 표시

,buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif" //버튼 이미지 경로

,buttonImageOnly: true //기본 버튼의 회색 부분을 없애고, 이미지만 보이게 함

,buttonText: "선택" //버튼에 마우스 갖다 댔을 때 표시되는 텍스트

,yearSuffix: "년" //달력의 년도 부분 뒤에 붙는 텍스트

,monthNamesShort: ['1','2','3','4','5','6','7','8','9','10','11','12'] //달력의 월 부분 텍스트

,monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'] //달력의 월 부분 Tooltip 텍스트

,dayNamesMin: ['일','월','화','수','목','금','토'] //달력의 요일 부분 텍스트

,dayNames: ['일요일','월요일','화요일','수요일','목요일','금요일','토요일'] //달력의 요일 부분 Tooltip 텍스트

,minDate: "-1M" //최소 선택일자(-1D:하루전, -1M:한달전, -1Y:일년전)

,maxDate: "+1M" //최대 선택일자(+1D:하루후, -1M:한달후, -1Y:일년후)

});

//input을 datepicker로 선언

$("#datepicker").datepicker();

$("#datepicker2").datepicker();

//From의 초기값을 오늘 날짜로 설정

$('#datepicker').datepicker('setDate', 'today'); //(-1D:하루전, -1M:한달전, -1Y:일년전), (+1D:하루후, -1M:한달후, -1Y:일년후)

//To의 초기값을 내일로 설정

$('#datepicker2').datepicker('setDate', '+1D'); //(-1D:하루전, -1M:한달전, -1Y:일년전), (+1D:하루후, -1M:한달후, -1Y:일년후)

});

</script>

</body>

</html>

각 옵션별 세부 내용을 순서대로 자세히 살펴보도록 하겠습니다.

dateFormat

input의 displayFormat을 변경해주는 옵션이다.

기본값은 DD/MM/YYYY 형태인데 우리나라에서 자주 사용되는 형태가 아니다.

아래와 같이 변경하면 YYYY-MM-DD 형태가 된다.

다른 형태가 필요하다면 공식 API문서를 참고해야 한다.

$.datepicker.setDefaults({

dateFormat: 'yy-mm-dd' //Input Display Format 변경

});

~~Tag : Jquery UI datepicker yyyymmdd~~

showOtherMonths

$.datepicker.setDefaults({

showOtherMonths: true //빈 공간에 현재월의 앞뒤월의 날짜를 표시

});

- false일 경우

- true일 경우

showMonthAfterYear

달력의 위쪽에 보면 년도보다 월이 먼저 표시된다. (ex : May 2018)

이 옵션을 true로 변경하면 년도가 월보다 먼저 표시된다. (ex : 2018 May)

년도가 먼저 표시되는 것이 우리나라에서는 일반적이기 떄문에 아주 유용한 옵션이다.

$.datepicker.setDefaults({

showMonthAfterYear: true //년도 먼저 나오고, 뒤에 월 표시

});

~~Tag : Jquery UI datepicker year month position, Jquery UI datepicker year month order~~

changeYear, changeMonth

선택해야 하는 날짜의 범위가 넓을 때 앞뒤 화살표가 아니라 콤보박스로 간편하게 년도와 월을 선택할 수 있도록 해주는 옵션이다.

$.datepicker.setDefaults({

changeYear: true //콤보박스에서 년 선택 가능

,changeMonth: true //콤보박스에서 월 선택 가능

});

~~Tag : Jquery UI datepicker year month combobox select~~

showOn

기본값은 input 옆에 버튼이 없다. input을 클릭해야 달력이 표시된다.

이 옵션의 값을 "button"이나 "both"로 설정하면 input 옆에 버튼이 표시된다.

"button"은 버튼을 클릭하면 달력이 표시되고, input에 직접 값을 입력할 수 있다.

"both"는 input을 클릭해도 버튼을 클릭해도 달력이 표시된다.

예외처리 등을 줄이려면 "both"를 선택하는 것이 간편할 것이다.

$.datepicker.setDefaults({

showOn: "button" //button:버튼을 표시하고,버튼을 눌러야만 달력 표시 ^ both:버튼을 표시하고,버튼을 누르거나 input을 클릭하면 달력 표시

});

$.datepicker.setDefaults({

showOn: "both" //button:버튼을 표시하고,버튼을 눌러야만 달력 표시 ^ both:버튼을 표시하고,버튼을 누르거나 input을 클릭하면 달력 표시

});

~~Tag : Jquery UI datepicker button, Jquery UI datepicker input click~~

buttonImage, buttonImageOnly, buttonText

showOn이 "both"이거나 "button"일 경우에만 의미있는 옵션들이다.

이 옵션은 주석만 봐도 이해가 잘될 거라고 생각한다.

$.datepicker.setDefaults({

buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif" //버튼 이미지 경로

,buttonImageOnly: true //기본 버튼의 회색 부분을 없애고, 이미지만 보이게 함

,buttonText: "선택" //버튼에 마우스 갖다 댔을 때 표시되는 텍스트

});

~~Tag : Jquery UI datepicker button image~~

yearSuffix

기본값은 달력의 년도가 2018과 같이 숫자로만 표현된다.

아래와 같이 옵션을 주면 2018년과 같이 년도 뒤에 올 텍스트를 추가할 수 있다.

$.datepicker.setDefaults({

yearSuffix: "년" //달력의 년도 부분 뒤에 붙는 텍스트

});

~~Tag : Jquery UI datepicker year text~~

monthNamesShort, monthNames, dayNamesMin, dayNames

기본값은 달력의 월과 요일 정보가 영문으로 표시된다.

아래와 같이 한글로 직접 입력해서 월과 요일정보를 한글과 숫자로만 표현할 수 있다.

$.datepicker.setDefaults({

monthNamesShort: ['1','2','3','4','5','6','7','8','9','10','11','12'] //달력의 월 부분 텍스트

,monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'] //달력의 월 부분 Tooltip 텍스트

,dayNamesMin: ['일','월','화','수','목','금','토'] //달력의 요일 부분 텍스트

,dayNames: ['일요일','월요일','화요일','수요일','목요일','금요일','토요일'] //달력의 요일 부분 Tooltip 텍스트

});

~~Tag : Jquery UI datepicker month text and tooltip, Jquery UI datepicker day text and tooltip~~

minDate, maxDate

이 옵션을 설정하면 minDate와 maxDate 안에 해당하지 않는 날짜는 disable 처리된다.

$.datepicker.setDefaults({

minDate: "-1M" //최소 선택일자(-1D:하루전, -1M:한달전, -1Y:일년전)

,maxDate: "+1M" //최대 선택일자(+1D:하루후, -1M:한달후, -1Y:일년후)

});

~~Tag : Jquery UI datepicker restrict~~

포인터 설정

기본적으로 아무 설정을 하지 않으면 datepicker로 선언한 input과 버튼에 마우스를 올려놓으면 마우스 아이콘이 I자 모양이라 보기가 좋지 않고, 클릭을 해야할지 말아야 할지도 애매하다.

<head></head> 사이에 아래와 같이 선언해주면 마우스를 가져다 댔을 때 마우스 아이콘이 손가락 모양으로 바뀐다.

<style>

/*datepicer 버튼 롤오버 시 손가락 모양 표시*/

.ui-datepicker-trigger{cursor: pointer;}

/*datepicer input 롤오버 시 손가락 모양 표시*/

.hasDatepicker{cursor: pointer;}

</style>

~~Tag : Jquery UI datepicker mouse pointer cursor~~

'SW > JQUERY' 카테고리의 다른 글

[JQUERY] input id 또는 name으로 검색할때 like 검색 (0)	2019.12.16
백스페이스 차단(input만 허용 ) (0)	2019.11.01
jQuery 체크박스, 라디오버튼 컨트롤 (0)	2019.11.01
체크박스 체크 이벤트 (checkBox Event) (0)	2019.10.18
jQuery에서 부모창 제어/접근(opener, parent) (0)	2019.10.11

아침의 꿈, 밤의 노래

[Jquery UI] Datepicker 간단 사용법

'SW > JQUERY' 카테고리의 다른 글

티스토리툴바

[Jquery UI] Datepicker 간단 사용법

'SW > JQUERY' 카테고리의 다른 글

'SW/JQUERY' Related Articles

티스토리툴바