0

I have a php function which returns a list of dates that i want to disable on the date picker and also change the colour of the cell to red. Is there any way this can be achieved?

Jacob
  • 35
  • 8
  • look here http://stackoverflow.com/questions/15400775/jquery-ui-datepicker-disable-array-of-dates – Eugen Jan 31 '15 at 23:02

1 Answers1

0

Check out the Datepicker API you can use the beforeShowDay option to set different class for specific days.

Define the dates to disable:

var disabledDates = ["9-5-2011","14-5-2011","15-5-2011"];

Implement a function to check the dates:

function unavailable(date) {
  var dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
  if ($.inArray(dmy, disabledDates) < 0) {
    return [true,"",""];
  } else {
    //the second parameter you can set your css class
    return [false,"red","Day unavailable"];
  }
}

Assign the option on the datepicker:

$('#datepicker').datepicker({ 
    altField : '#hiddenFieldID',
    format: 'mm-dd-yyyy',
    changeMonth:true,
    minDate: 14,
    beforeShowDay: unavailable //here it is
});

SOURCE

Wilmer
  • 2,511
  • 1
  • 14
  • 8
  • Hi, i have tried your solution and have adapted it to take an array using json_encode. however when i load my page he date picker disappears. I have added my code above in the question. – Jacob Feb 01 '15 at 09:33
  • Works fine in this [demo](http://jsfiddle.net/9gwreysL/). Check the console for errors (F12 on chrome/firefox > console tab). – Wilmer Feb 01 '15 at 13:31
  • Ive just realised that when i add var disabledDates = ; to get all the dates that my php function outputs the date picker disappears. Is this the correct way to be getting the dates? – Jacob Feb 02 '15 at 11:42
  • Try to see what the output is... Maybe nothing is being echoed and the result ends up being var disabled dates = ; which is invalid. With that said this is one of the reasons why you shouldn't mix JavaScript with PHP code. Better to use a data attribute on the datepicker input and get it inside the function. – Wilmer Feb 02 '15 at 21:23
  • ["20-02-2015"] is echoed. This means the date should be in the javascript but it looks like it isn't – Jacob Feb 03 '15 at 13:27
  • Well, the date should be formatted like ["20-2-2015"] (without leading zeroes), but that shouldn't prevent the datepicker from loading. – Wilmer Feb 03 '15 at 13:35
  • var_dump produces string(14) "["20-02-2015"]" – Jacob Feb 03 '15 at 14:14