jQuery UI DatePicker - only show 3 days of entire year

Question

I'm wondering if it's possible to show only 3 days a year in the datepicker?

This is what I got so far:

JS:

 var availableDates = ["28-12-2017","29-12-2017","30-12-2017"];

 function available(date) {
   dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + 
   date.getFullYear();
   if ($.inArray(dmy, availableDates) !== -1) {
     return [true, "","Available"];
   } else {
     return [false,"","unAvailable"];
   }
 }

 $('#date').datepicker({ beforeShowDay: available }); 

css:

.ui-datepicker-unselectable {display: none;}

jsfiddle link

Answer 1

Dear you forgot defaultDate , please try this:

  var availableDates = ["28-12-2017","29-12-2017","30-12-2017"];

  function available(date) {
   dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
  if ($.inArray(dmy, availableDates) !== -1) {
      return [true, "","Available"];
    } else {
      return [false,"","unAvailable"];
    }
  }

  $('#date').datepicker({ beforeShowDay: available, defaultDate: "12/28/2017" }); 

Please use this fiddle http://jsfiddle.net/szYYY/50/

Answer 2

I would suggest you to remove the hardcoded date and make the code more generic:

JS:

 var availableDates = ["28-12-2017", "29-12-2017", "30-12-2017"];

 function available(date) {
   dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
   if ($.inArray(dmy, availableDates) !== -1) {
     return [true, "", "Available"];
   } else {
     return [false, "", "unAvailable"];
   }
 }

 $('#date').datepicker({
   beforeShowDay: available,
   dateFormat: "dd-mm-yy",
   minDate: availableDates[0],
   maxDate: availableDates[2]
 });

No CSS required.

Displaying the full month with disabled dates gives clarity to the user rather than hiding the dates.

Demo: http://jsfiddle.net/szYYY/52/