jQuery Forum

The big calendar (top right) is not clickable.

Only the blue 'Check-in Date' box is clickable.

I would like to select an available date from the large calendar and insert it into the 'Check-in Date' box.

 

Thanks for that - but where exactly do I put it in my code and how do I stop the popup calendar in the blue 'Check-in Date' box from coming up.

 

OK - almost there. I can now select a date from the big calendar and it is input into the textbox.

 

This is my code now:-

 <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"]
            }
        }
        });
  
  
  $('#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 ,
       onSelect: function(dateText){
             $("#txtFromDate1").val(dateText);
       }
 });
    });
 </script>

 

I tried removing references to 'txtFromDate1' but that just makes the big calendar disappear.

I still have to work out how to just enable 'Saturdays' as clickable (the check-in day). The code is there - but obviously in the wrong place.

 

  if (day == <?php echo $bsiCore->config['conf_week_checkin_day'];?> ) {

 

If you go to October 2014, only 4, 11 and 25 should be clickable.

 

and the calendar still pops up when I click inside the blue 'Check-in Date' box.

 

Yes - I've done that now.

 

I tried making a function for the the check-in day like this:-

 

function checkin(day) {
            var day = day.getDay();
            if (day == <?php echo $bsiCore->config['conf_week_checkin_day'];?> ) {
                return [true, "somecssclass"]
            } else {
                return [false, "someothercssclass"]
            }
        }

 

and then adding the param 'checkin' to $('#iDate').datepicker({  like this:-

 

$('#iDate').datepicker({
      beforeShowDay: unavailable,

     checkin,
      minDate:0 ,
       onSelect: function(dateText){
             $("#txtFromDate1").val(dateText);
       }

 

but that doesnt seem to work.

 

I need the checkin function here so people can only book (and check-in) on Saturday.

At the moment all days of the week are available for check-in, this is not good.

 

Is it not possibe to call more than one function in beforeShowDay: ?

 

 

Yes - the function has to block all days in 'red' (including Saturdays) as well as all days that are not Saturdays.

 

I'm just looking at combining the two functions into one. Something like this:-

 

function unavailable(date) {
   ymd = date.getFullYear() + "-" + ("0"+(date.getMonth()+1)).slice(-2) + "-" + ("0"+date.getDate()).slice(-2);
   cday = day.getDay();
   day = new Date(ymd).getDay();
   if ($.inArray(ymd, unavailableDates) < 0  && cday == <?php echo $bsiCore->config['conf_week_checkin_day'];?>) {
    return [true, "enabled", "Available"];
   } else {
    return [false,"disabled","Booked Out"];
   }
  }

 

 Not working yet - I must be missing something.

 

Maybe a 'multi function input' to beforeShowDay: is one for the developers?

 

 

OK - tried that - almost there but not quite.

 

Now its just blocking all dates (red) - except Saturdays - not what is required.

 

Customers need to see what weeks are already booked (red) and which (and how many) are free (white).

So if they need 2 or 3 weeks free in a row - to book a holiday - they can see that and book them accordingly.

 

The already booked weeks need to be blocked seperately (red) - this already works fine.

All that is needed is to block Sunday to Friday but they should stay white if they are not booked.

 

As there is only one function which can only return one value - true or false, its not possible (I don't think) to do what I want to do.

 

Maybe someone will prove me wrong.

 

Yep! - that's got it - nice one!

 

Thanks very much for your help.