기본 사용법
$(function() {
$( "#searchDate" ).datepicker({
method
});
});
메소드 종류
showOn: 'button' //우측에 달력 버튼 사용
buttonImage: '/images/icon_cal.gif' //버튼을 이미지로
buttonImageOnly: true //버튼만 사용(원래는 인풋박스 클릭)
buttonText:"달력" //버튼 텍스트
showButtonPanel: true //하단 버튼 패널 보이기(today,done)
showMonthAfterYear:true //년도 다음에 월 표시
dateFormat: 'yymmdd' //날짜표시포맷(yymmdd,yy.mm.dd,yy-mm-dd 등)
changeYear: true //년도 선택 셀렉트 박스 표시
changeMonth: true //월 선택 셀렉트 박스 표시
minDate: '-0d' //최소 이전 날짜(-0d:오늘부터) null은 제한없음
showOtherMonths: true //나머지날짜도 화면에 표시,선택은 불가
selectOtherMonths: false //나머지날짜도 선택하려면 true
한글화
$.datepicker.regional['ko']= {
closeText:'닫기',
prevText:'이전달',
nextText:'다음달',
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:['일','월','화','수','목','금','토']};
$.datepicker.setDefaults( $.datepicker.regional[ 'ko' ] );
토,일요일 선택 불가
function noWeekend(date) {
return [date.getDay() != 0 && date.getDay() != 6, ''];
}
beforeShowDay: noWeekend 메소드 추가
토,일요일 색깔 변경
.ui-datepicker-week-end {color:red;}
.ui-datepicker-week-end .ui-state-default {color:red;}
//휴일을 배열로 설정
var holidays = {
"0101":{type:0, title:"신정"},
"0301":{type:0, title:"삼일절"},
"0505":{type:0, title:"어린이날"},
"0606":{type:0, title:"현충일"},
"0815":{type:0, title:"광복절"},
"1003":{type:0, title:"개천절"},
"1225":{type:0, title:"크리스마스"}
};
var holiday = holidays[$.datepicker.formatDate("mmdd",day )]; //표시날이 휴일인지 체크
css
.date-holiday0 .ui-state-default { background-image: none; background-color: #684468;border-color: #535353}
달력 버튼 css적용
$('img.ui-datepicker-trigger').css({'position':'relative','top':'5px'});
2개 입력시 마감날짜가 시작날짜 전을 선택하지 못하게 하는 경우
onSelect: function( selectedDate ) {
var option = this.id == "startDate" ? "minDate" : "maxDate",
instance = $( this ).data( "datepicker" );
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
dates.not( this ).datepicker( "option", option, date );
}
달력 크기 조절
jquery-ui-xxx.css 파일에서 요부분을 찾아
.ui-datepicker {
width
:
17em
;
padding
: .
2em
.
2em
0
;
display
:
none
; }
font-size 를 원하는 크기로 요렇게 바꿔주면 된다. 달력 팝업 사이즈를 크게 하고 싶을때는 font 크기를 크게하고 작게 하고 싶을때는 font 크기를 작게 해주면 팝업창이 쥐똥만하게 뜬다.
.ui-datepicker {
width
:
17em
;
padding
: .
2em
.
2em
0
;
display
:
none
;
font-size
:
20px
;}