mrkjm@nate.comjQuery UI 편리한 날짜선택 위젯 Datepicker 간단 사용법 #2
⑤ showOn
기본값은 input 옆에 버튼이 없다. input을 클릭해야 달력이 표시됩니다.
이 옵션의 값을 "button"이나 "both"로 설정하면 input 옆에 버튼이 표시됩니다.
"button"은 버튼을 클릭하면 달력이 표시되고, input에 직접 값을 입력할 수 있습니다.
"both"는 input을 클릭해도 버튼을 클릭해도 달력이 표시됩니다.
예외처리 등을 줄이려면 "both"를 선택하는 것이 간편할 겁니다.
$.datepicker.setDefaults({
showOn: "button" // button:버튼을 표시하고,버튼을 눌러야만 달력 표시
});
$.datepicker.setDefaults({
showOn: "both" // both:버튼을 표시하고,버튼을 누르거나 input을 클릭하면 달력 표시
});
⑥ buttonImage, buttonImageOnly, buttonText
showOn이 "both"이거나 "button"일 경우에만 의미있는 옵션들입니다.
이 옵션은 주석만 봐도 이해가 잘 될 거라고 생각합니다.
$.datepicker.setDefaults({
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif", //버튼 이미지 경로
buttonImageOnly: true, //기본 버튼의 회색 부분을 없애고, 이미지만 보이게 함
buttonText: "선택" //버튼에 마우스 갖다 댔을 때 표시되는 텍스트
});
⑦ yearSuffix
기본값은 달력의 년도가 2018과 같이 숫자로만 표현됩니다.
아래와 같이 옵션을 주면 2018년과 같이 년도 뒤에 올 텍스트를 추가할 수 있습니다.
$.datepicker.setDefaults({
yearSuffix: "년" //달력의 년도 부분 뒤에 붙는 텍스트
});
⑧ 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 텍스트
});
⑨ minDate, maxDate
이 옵션을 설정하면 minDate와 maxDate 안에 해당하지 않는 날짜는 disable 처리됩니다.
$.datepicker.setDefaults({
minDate: "-1M", // 최소 선택일자(-1D:하루전, -1M:한달전, -1Y:일년전)
maxDate: "+1M" // 최대 선택일자(+1D:하루후, -1M:한달후, -1Y:일년후)
});
선택할 날짜의 범위를 지정한 모습
⑩ numberOfMonths
한번에 여러 month를 표현할 때는 다음과 같이 배열 형식으로 표현할 month의 개수를 설정할 수 있습니다.
$.datepicker.setDefaults({
numberOfMonths: [2,2]
});
여러달을 한번에 표현한 모습
⑪ showButtonPanel, currentText, closeText
Datepicker의 하단 메뉴을 설정 할 수 있습니다.
$.datepicker.setDefaults({
showButtonPanel: true, // true로 설정하면 하단의 메뉴 영역이 보임
currentText: '오늘 날짜', // 표시 되는 텍스트를 지정
closeText: '닫기' // 표시 되는 텍스트를 지정
});
오늘날짜/닫기 버튼을 추가한 모습
⑫ 포인터 설정
기본적으로 아무 설정을 하지 않으면 Datepicker로 선언한 input과 버튼에 마우스를 올렸을 시 보기가 좋지 않습니다.
<head></head> 사이에 아래와 같이 선언해 주면 마우스 포인터의 모양을 손가락 모양으로 바꿀 수 있습니다.
<style>
//datepicer 버튼 롤오버 시 손가락 모양 표시
.ui-datepicker-trigger{cursor: pointer;}
//datepicer input 롤오버 시 손가락 모양 표시
.hasDatepicker{cursor: pointer;}
</style>
JQuery, UI, 날짜선택, 위젯, Datepicker, 사용법, 달력, 날짜선택기
