Question

我有一个代码，我已经在jQuery datepicker中禁用了几个日期和所有周末。现在要求我必须启用一些周末日期。

我已经尝试将这些日期添加到数组中，然后尝试启用它们但它不起作用。我需要一个解决这个问题的方法。当前代码低于适用于禁用周末和特定日期的工作。请告诉我如何在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>

感谢任何帮助。

Answer 1

您在beforeShowDay函数中的一个返回值未返回有效数组。从documentation开始，它声明：

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

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

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

我使用indexOf来识别Dates数组中是否存在String。如果没有，则返回[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>

Answer 2

如果您想要保持相同的星期日，您只需更改用于禁用它们的if条件。而不是：

if (day == 0)

使用

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

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

这是一个实时样本：

＆＃13;

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, ''];
};

＆＃13;

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

＆＃13;

请注意：

我在初始化datepicker

dateFormat

我已使用$.datepicker.formatDate格式化"d-m-yy"格式的日期。
我已从beforeShowDay功能中删除了第三个可选的工具提示参数。

jquery datepicker：需要在已经禁用的周末启用几个周末

2 个答案: