Hi!

 

I'm trying to use the datepicker calendar without the popup. At the moment I have 2 calendars on my web page but I want to get rid of one.

My web page is here:- Web page I want to keep the large calendar (top right) and use that to select available dates. I have the following code which I can't get to work properly. Can anyone help please?

 

<script type="text/javascript">
 $(function() {
  $.datepicker.setDefaults({ dateFormat: '<?php echo $bsiCore->config['conf_dateformat'];?>', minDate: new Date(), numberOfMonths: 1 });
        $("#txtFromDate1").datepicker(
  
        { beforeShowDay: function(day) {
            var day = day.getDay();
            if (day == <?php echo $bsiCore->config['conf_week_checkin_day'];?> ) {
                return [true, "somecssclass"]
            } else {
                return [false, "someothercssclass"]
            }
        }
        });
  $("#datepickerImage").click(function() {
      $("#txtFromDate1").datepicker("show");
   
    });
  
  $('#btn_appmt_search').click(function() {   
   if($('#txtFromDate1').val()==""){
    alert('Please Select Check In Date.');
    return false;
   } else {
    return true;
   }  
    });
   
       var unavailableDates = [<?php echo substr($dateRange, 0, -1);?>]; // yyyy/MM/dd
  
  function unavailable(date) {
   ymd = date.getFullYear() + "-" + ("0"+(date.getMonth()+1)).slice(-2) + "-" + ("0"+date.getDate()).slice(-2);
   day = new Date(ymd).getDay();
   if ($.inArray(ymd, unavailableDates) < 0 ) {
    return [true, "enabled", "Available"];
   } else {
    return [false,"disabled","Booked Out"];
   }
  }

  $('#iDate').datepicker({ beforeShowDay: unavailable, minDate:0 });
    });
 </script>

<style type="text/css">
.disabled span {
 color:black !important;
 background:red !important;
}
.ui-datepicker {
 width: 17em;
 padding: .2em .2em 0;
 display: none;
 font-size:14px;
}
</style>

 

Thanks in advance.