jquery 日期选择器:需要从已经禁用的周末启用几个周末

我有一个代码，我在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>

任何帮助，不胜感激。

您在 beforeShowDay 函数中的返回之一未返回有效的数组。从文档中，它指出：

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

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

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

我使用 indexOf 来确定字符串是否存在于日期数组中。如果没有，则返回[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>

如果要启用相同的星期日，只需更改用于禁用它们的 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函数中删除了第三个可选的工具提示参数。

相关内容

最新更新

热门标签：