在 jquery ui datepicker 中禁用不可用/不受欢迎的日期答案

【问题标题】：Make unavailable/undesirable dates disabled in jquery ui datepicker在 jquery ui datepicker 中禁用不可用/不受欢迎的日期
【发布时间】：2018-01-19 08:41:00
【问题描述】：

我正在尝试禁用我的 jquery ui datepicker 日历上的应用程序上下文中所有不需要/无意义的日期，以改善用户体验，但由于某种原因，所有这些日期都被禁用。

我正在使用 jquery ui 日期选择器。

任何帮助将不胜感激。我也尝试过手动循环遍历数组中的每个项目。

我的代码：

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

【问题讨论】：

条件刚好相反，应该是if ($.inArray(dmy, unavailableDates) == -1) {...
@adeneo 没有修复它
不是吗-> jsfiddle.net/ekop9nwf/2
@adeneo 哎呀你是对的.. 我正在检查旧日期哈哈

标签： javascript jquery date jquery-ui datepicker

【解决方案1】：

你已经颠倒了条件，你想返回true，如果它们不在数组中，则可以选择，如果它们不可选，则false，即它们在数组中

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">

【讨论】：

@user4756836 - 因为日期不一样。您在检查日期是否为04-08-2017时突然开始使用2017-08-04
是的，我只是想...这是我的主要问题:(

【解决方案2】：

首先你应该检查

$.inArray(date, unavailableDates) === -1

这意味着date不在unavailableDates

其次，您应该将日期与new Date().getTime() 进行比较，检查 jsfiddle：

http://jsfiddle.net/ekop9nwf/3/

var unavailableDates = [new Date("9-5-2011").getTime(), new Date("14-5-2011").getTime(), new Date("15-5-2011").getTime()];

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

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

【讨论】：