jquery datepicker：需要从已经禁用的周末启用几个周末答案

【问题标题】：jquery datepicker : Need to enable a few weekends from already disabled weekendsjquery datepicker：需要从已经禁用的周末启用几个周末
【发布时间】：2017-05-22 20:49:55
【问题描述】：

我有一个代码，其中我在 jQuery 日期选择器中禁用了几个日期和所有周末。现在有一个要求，我必须启用几个周末日期。

我尝试将这些日期添加到数组中，然后尝试启用它们，但它不起作用。我需要解决这个问题。当前代码在下面，它可以很好地禁用周末和一组日期。请告诉我如何添加代码以启用 5 月或 6 月的几个星期天（例如 28-05-2017）

<script>
var unavailableDates = ["16-9-2017", "22-9-2017" , "19-10-2017", "1-12-2017" , "11-12-2017" , "25-12-2017", "1-1-2018" , "31-1-2018" , "16-2-2018" , "17-2-2018" , "1-5-2018"];

$(function() {
    $( "#datepicker" ).datepicker({ minDate: +2, beforeShowDay:noSunday, numberOfMonths:2, 
       onSelect: function(date, obj){
           $('#date_input').val(date);  //Updates value of of your input 
       }
    });

    $( "#datepicker" ).datepicker( "option", "dateFormat", "dd-mm-yy");

    function noSunday(date){ 
        var dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
        var day = date.getDay();
        if (day == 0) {
            return [false, "Highlighted", date];
        }

        for (var i = 0; i < unavailableDates.length; i++) {
            if ($.inArray(dmy, unavailableDates) != -1 ) {
                return [false, "Highlighted", date];
            }
        }
        return [true, '', ''];
    };
});
</script>

感谢任何帮助。

【问题讨论】：

标签： javascript jquery date datepicker jquery-ui-datepicker

【解决方案1】：

您在 beforeShowDay 函数中的一个返回没有返回一个有效的数组。来自documentation，它指出：

[2] 此日期的可选弹出工具提示

if (day == 0) {
    return [false, "Highlighted"];
}

虽然您的循环和 inArray 的使用会起作用，但您已经完成了创建日历日期的字符串表示形式的困难部分，以匹配数组中日期的格式。

我使用indexOf 来识别字符串是否存在于 Dates 数组中。如果不是，则返回[true, '']，否则，返回错误状态[false, "Highlighted"]。

var unavailableDates = ["16-9-2017", "22-9-2017", "19-10-2017", "1-12-2017", "11-12-2017", "25-12-2017", "1-1-2018", "31-1-2018", "16-2-2018", "17-2-2018", "1-5-2018"];

$(function() {
  $("#datepicker").datepicker({
    minDate: +2,
    beforeShowDay: noSunday,
    numberOfMonths: 2,
    onSelect: function(date, obj) {
      $('#date_input').val(date); //Updates value of of your input 
    }
  });

  $("#datepicker").datepicker("option", "dateFormat", "dd-mm-yy");

  function noSunday(date) {
    var dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
    var day = date.getDay();
    if (day == 0) {
      return [false, "Highlighted"];
    } else {
      return (unavailableDates.indexOf(dmy) !== -1) ? [false, "Highlighted"] : [true, ''];
    }
  };
});

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <p>Date: <input type="text" id="datepicker"></p>
</body>

</html>

【讨论】：

【解决方案2】：

如果您想保持启用相同的星期日，您可以简单地更改用于禁用它们的 if 条件。而不是：

if (day == 0)

使用

if (day == 0 && $.inArray(dmy, availableDates) == -1)

其中availableDates 是一个数组，其中包含您要保持启用的所有星期日。

这是一个现场样本：

var unavailableDates = ["16-9-2017", "22-9-2017" , "19-10-2017", "1-12-2017" , "11-12-2017" , "25-12-2017", "1-1-2018" , "31-1-2018" , "16-2-2018" , "17-2-2018" , "1-5-2018"];

var availableDates = ["28-5-2017"];

$( "#datepicker" ).datepicker({
  minDate: +2,
  beforeShowDay: noSunday,
  numberOfMonths:2, 
  onSelect: function(date, obj){
    $('#date_input').val(date);  //Updates value of of your input 
  },
  dateFormat: "dd-mm-yy"
});

function noSunday(date){ 
  var dmy = $.datepicker.formatDate("d-m-yy", date);
  
  var day = date.getDay();
  if (day == 0 && $.inArray(dmy, availableDates) == -1) {
    return [false, "Highlighted"];
  }

  for (var i = 0; i < unavailableDates.length; i++) {
    if ($.inArray(dmy, unavailableDates) != -1 ) {
      return [false, "Highlighted"];
    }
  }
  return [true, ''];
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"/>

<input type="text" id="datepicker">
<input type="text" id="date_input">

请注意：

我在初始化日期选择器时使用了dateFormat 选项
我使用$.datepicker.formatDate 将日期格式化为"d-m-yy" 格式。
我已从beforeShowDay 函数中删除了第三个可选工具提示 参数。

【讨论】：