how to change the jquery date-picker css for the unclickable date

Question

I am using jquery date-picker and i want that the days list which i am putting in beforeShowDay function should get a different colour and also not been able to be selected or clickable....below is some code

i have google this problem a lot....i found half solution of my problem...it changes its colour for those special dates but are clickable but i want them to be unselected

<style type="text/css">
    td.specialDay, table.ui-datepicker-calendar tbody td.specialDay  a { 
    background: none !important;
    background-color: #fffac2 !important; 
    color: black;
     }
</style>
<script type="text/javascript"> 

    var unavailableDates = ["30-7-2012","11-7-2012","15-8-2012"];
    function unavailable(date) {
      dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
      if ($.inArray(dmy, unavailableDates) < 0) {
        return [true,"","Book Now"];
      } else {
        return [true,"specialDay","Booked"];
      }
    }

    $(function() {

             $( "#datepicker" ).datepicker({

                    minDate: 0, 
                    maxDate: "+3M +10D",
                    beforeShowDay: unavailable 

                });

              });

    </script>

if there is any solution please tell me... thanks

Answer 1

In else condition you need to mention false to make not select able like

if ($.inArray(dmy, unavailableDates) < 0) {
        return [true,"","Book Now"];
      } else {
        return [false,"specialDay","Booked"];
      }

I found your problem. Please check the dmy variable. and the code which is working fine is

 var unavailableDates = ["30-7-2012","11-7-2012","15-8-2012"];
    function unavailable(date) {
     var year, month, day, currDate;
     year = String(date.getFullYear());
     month = String(date.getMonth() + 1);
    if (month.length === 1) {
         month = "0" + month;
    }
    day = String(date.getDate());
     if (day.length === 1) {
         day = "0" + day;
     }
      dmy = String(day+'-'+month+'-'+year);
      if ($.inArray(dmy, unavailableDates) < 0) {
        return [true,"","Book Now"];
      } else {
        return [false,"specialDay","Booked"];
      }
    }

Hope this may helps

Answer 2

this worked for me...hope that who are having this kind of problem help them too

below in my answer i have higlighted 3 points so according to that

in step 1 and 2 add this css in 3rd step edit or copy paste like this

hope that anybody looking this kind of problem will get there answer..if not then tell me ..if i can explain more

<style type="text/css">
  .ui-state-active  {      //1.add this
    background: blue !important;
}
.ui-state-active .ui-state-default{   //2. add this
    background: red !important;
}

</style>
<script type="text/javascript"> 

    var unavailableDates = ["30-7-2012","11-7-2012","15-8-2012"];
    function unavailable(date) {
      dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
      if ($.inArray(dmy, unavailableDates) < 0) {
        return [true,"","Book Now"];
      } else {
        return [false,"ui-state-active","booked"]; //3. edit here like this..
      }
    }

    $(function() {

             $( "#datepicker" ).datepicker({

                    minDate: 0, 
                    maxDate: "+3M +10D",
                    beforeShowDay: unavailable 

                });

              });

    </script>

Answer 3

you have problem on checking the dates in an array. Please Check this link which is working fine and the correct way to do. I hope it may useful for you