jQuery UI Datepicker在限制选择中不会呈现第二个月

Question

我有一个小提琴：http://jsfiddle.net/4w846rf3/

我将日期数组传递给jQuery UI的datepicker。有了这些日期，我想限制当前日历，以便只能选择提供的日期。经过大量研究后，我发现beforeShowDay函数将有助于限制日期，但我所经历的不正确。当前月份的日期将呈现正确的限制日期，但下个月不会。

var availableDates = [
    "12-22-2014", 
    "12-13-2014", 
    "12-27-2014", 
    "01-17-2015", 
    "01-24-2015"
];

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

$('input').datepicker({beforeShowDay: available})

正确呈现12月：

和一月错误：

Answer 1

你可以这样做：

var availableDates = [
  "12-22-2014", 
  "12-13-2014", 
  "12-27-2014", 
  "01-17-2015", 
  "01-24-2015"
];

function checkAvailability(date){
  var dateString = $.datepicker.formatDate('mm-dd-yy', date);
  return [availableDates.indexOf(dateString) !== -1]
}

$('input').datepicker({
  beforeShowDay: checkAvailability
});

正如Barmar建议的那样，这会利用$.datepicker.formatDate()，顾名思义就是将日期格式化为具有指定格式的字符串值。

一旦我们有一个日期字符串，其格式与数组中的格式相同，只需使用beforeShowDay选项，如果日期字符串匹配其中一个，则只返回true你指定的那些。

formatDate（）方法是datepicker的实用程序函数之一。 您可以在此处阅读：http://api.jqueryui.com/datepicker/#utility-functions

<强>演示：

var availableDates = [
  "12-22-2014", 
  "12-13-2014", 
  "12-27-2014", 
  "01-17-2015", 
  "01-24-2015"
];

function checkAvailability(date){
  var dateString = $.datepicker.formatDate('mm-dd-yy', date);
  return [availableDates.indexOf(dateString) !== -1]
}

$('input').datepicker({
  beforeShowDay: checkAvailability
});

<link href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>


<input type="text"/>