JQUERY datepicker 원하는 날짜에 테두리

예시) 원하는 날짜에 테두리 화면

 

 <style>
    .Highlighted a{
       border: 2px solid black !important;
   background-image :none !important;
   font-weight:bold !important;
   font-size: 12px;
}
    </style>

 

 $( "#searchToDate" ).datepicker({ 
          showOn: "button",
          buttonImage: "<c:url value='/resource/images/calendar46.png'/>",
          buttonImageOnly: true,
          buttonText: "Select date",
          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 = caladerdate[date];    //스타일을 적용할 날짜
                    if ($.inArray(date, caladerdate) >= 0) {    //jquery달력의 날짜가 caladerdate와 같다면
                     return [true, "Highlighted", Highlight];    //스타일 적용
                    }else{
                     return [true, '', ''];
                    }
                  }
     });
    $( "#searchToDate" ).datepicker("option", "dateFormat", "yy/mm/dd");

 

datepicker의 각종 옵션들은 구글링하면 나온다.

if문은 예를들어 mm이 9일이라면 09가 아니라 그냥 9로 나오니 09를 붙이는 로직인데 if문말고 사실 silce 함수를 써서

"001".slice(-2) = "01" 이런식으로 해줘도 된다. 

 

caladerdate는 변수이름으로 배열 전역변수로 지정해준다.

원하는 날짜라기 보단 사실 해당 작업지시가 있는 날을 보여주기 위한 화면인데

사용자가 날짜를 클릭할 때 테두리가 있는 날은 작업지시가 있는 날이구나 하고 보여주기 위해

먼저 $(document).ready(function(){}); 안에서 ajax로 작업지시날짜 데이터를 갖고와서 caladerdate 배열에 작업지시날짜 데이터를 넣어줬다.

 

만약 caladerdate에 이번 월의 작업지시 데이터만 갖고와서 다른 날짜에 작업지시를 볼 경우  $("#searchToDate").change(function(){}); 이벤트에 ajax로 다른 날짜에 월을 조회해서 데이터를 갖고오자

 

설명이 빈약한거 같긴한데 뭐 대충 이런 느낌이다. 끝