How to use JQuery DatePicker in client side Interaction

 in css style sheet

use this following css to control the appearance of date being highlight

  /* Dates that is available or found in availableDates will be highlight
. Text color - red, background - lime. */
        td.highlight, table.ui-datepicker-calendar tbody td.highlight a { 
            background: none !important;
            background-color: #00FF00 !important; 
            color: #FF0000;
        }

 <script type="text/javascript">
         var availableDates = null;
         $(document).ready(function () {
             // Datepicker
             $('#datepicker').datepicker({
                 dateFormat: 'yyyy-mm-dd',
                 defaultDate: "+1w",
                 changeMonth: true,
                 changeYear: true,
                 numberOfMonths: 1,
                 onSelect: function () {
                     var month = new Array();
                     month[0] = "Jan";
                     month[1] = "Feb";
                     month[2] = "Mar";
                     month[3] = "Apr";
                     month[4] = "May";
                     month[5] = "Jun";
                     month[6] = "Jul";
                     month[7] = "Aug";
                     month[8] = "Sep";
                     month[9] = "Oct";
                     month[10] = "Nov";
                     month[11] = "Dec";
                     var day1 = $("#datepicker").datepicker('getDate').getDate();
                     var month1 = $("#datepicker").datepicker('getDate').getMonth() + 1;
                     var year1 = $("#datepicker").datepicker('getDate').getFullYear();
                     if (month1.toString().length == 1) {
                         month1 = "0" + month1.toString();
                     }
                     if (day1.toString().length == 1) {
                         day1 = "0" + day1.toString();
                     }
                     var fullDate = year1 + "-" + month1 + "-" + day1;
 
                     var DateMMMMFormat = month[$("#datepicker").datepicker('getDate').getMonth()] + " " + day1 + ", " + year1;
                     //selectedDate.value = fullDate;
                     
                     LoadSpecificDate(fullDate, DateMMMMFormat);
                 },
                 beforeShowDay: AvailableDate
             });
 
             $(".calendarIcon").click(function () {
                 $("#datepicker").datepicker("show");
             });
 

 fucntion AvailableDate will handle beforeShowDay event that render each specific in the 

 DatePicker. in my case, i will highlight all the dates that is found in the availableDates 

 array and disable the click on those dates are unavailable.

             function AvailableDate(date) {
                 var month1 = (date.getMonth() + 1);
                 var day1 = date.getDate();
                 if (month1.toString().length == 1) {
                     month1 = "0" + month1.toString();
                 }
                 if (day1.toString().length == 1) {
                     day1 = "0" + day1.toString();
                 }
                 dmy = date.getFullYear() + "-" + month1 + "-" + day1;
                 if ($.inArray(dmy, availableDates) == -1) {
                     return [false, ""];
                 } else {
                     return [true, "highlight"];
                 }
             }
 
         });
        </script>

this attached image shows dates being highlight if they exist in the AvailableDates array