Make unavailable/undesirable dates disabled in jquery ui datepicker

debugcn Published at Dev

user4756836

I am trying to make all the undesirable/meaningless dates in terms of my application context on my jquery ui datepicker calendar disabled to improve the user experiences but for some reason all of them are disabled.

I am using the jquery ui datepicker.

Any help will be appreciated. I have tried manually looping through each item in the array as well.

My Code:

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

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

JSFiddle Demo

adeneo

You've reversed the condition, you want to return true, as in the days are selectable if they aren't in the array, and false if they are not selectable, i.e. they are in the array

var unavailableDates = ["9-8-2017", "14-8-2017", "15-8-2017", "16-8-2017", "17-8-2017", "18-8-2017"];

function available(date) {
  var dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();

  if ($.inArray(dmy, unavailableDates) == -1) {
    return [true, "", "Available"];
  } else {
    return [false, "", "unAvailable"];
  }
}

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

<input type="text" name="date" id="date" readonly="readonly" size="12" />


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">

Collected from the Internet

Please contact [email protected] to delete if infringement.