jquery datepicker 오늘날짜 다른색상 today background color

아래 그림처럼 query datepicker 에서 오늘 날짜 배경색을 다른 색으로 변경하기.

방식은 오늘 날짜에 적용할 스타일을 만들고 datepicker() 안에서 적용한다.

<input type="text" name="date1" value="" readonly id="date1" required size="9" maxlength="8" placeholder="날짜선택"> 

1. 스타일 추가

jquery-ui.css 파일에 아래 내용을 추가한다.

jquery-ui.css 파일이 아니어도 상관없으며 datepicker가 사용되는 페이지에서 호출되는 css 파일이면 된다.

/*아래는 추가할 내용*/

.Highlighted a{

   background-color : #456baf !important;

   background-image :none !important;

   color: White !important;

   font-weight:bold !important;

   font-size: 12px;

}

2. datepicker 수정

$(function(){ // 날짜 입력

var today = new Date();

var dd = today.getDate();

var mm = today.getMonth()+1;

var yyyy = today.getFullYear();

if(dd < 10){

dd = '0'+dd

}

if(mm < 10){

mm = '0'+mm

}

today = yyyy+'/'+mm+'/'+dd;     //오늘날짜 ex. 2016/11/12

var todaydate = [today];        //배열에 넣음

$("#date1").datepicker({ 

changeMonth: true, 

changeYear: true, 

dateFormat: "yymmdd", 

        minDate: 0,

        maxDate: '+1Y+6M',

showButtonPanel: true,

beforeShowDay: function(dateStr){

var dd = dateStr.getDate();

var mm = dateStr.getMonth()+1;

var yyyy = dateStr.getFullYear();

if(dd < 10){

dd = '0'+dd

}

if(mm < 10){

mm = '0'+mm

}

date = yyyy+'/'+mm+'/'+dd;        //jquery 달력의 날짜를 yyyy/mm/dd 형태로 만듬.

var Highlight = todaydate[date];    //스타일을 적용할 날짜

if ($.inArray(date, todaydate) >= 0) {    //jquery달력의 날짜가 오늘날짜와 같다면

return [true, "Highlighted", Highlight];    //스타일 적용

}else{

return [true, '', ''];

}

},

   

    

});

});

끝.