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

I have a code where by I have disabled a few dates and all the weekends in the jQuery datepicker. Now there is a requirement that I have to enable a few weekend dates.

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

I have tried adding in those dates to an array and then try to enable them but it's not working. I need a solution to this problem. Current code is below which works fine for disabling weekends and a certain set of dates. Please let me know how can I add code for enabling a couple of Sundays in the month of May or June (for instance 28-05-2017)

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

Any help is appreciated.

任何帮助表示赞赏。

2 个解决方案

#1

One of your returns in your beforeShowDay function wasn't returning a valid array. From the documentation, it states:

beforeShowDay函数中的一个返回值未返回有效数组。从文档中可以看出:

[2] an optional popup tooltip for this date

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

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

Whilst your loop and usage of inArray would have worked, you have already done the difficult part of creating the String representation of the Calendar's date, to match the format of the Dates within your Array.

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

I used indexOf to identify if the String existed in the Dates array. If it didn't, return [true, ''], otherwise, return the false state [false, "Highlighted"].

我使用indexOf来识别Dates数组中是否存在String。如果没有,则返回[true,''],否则返回false状态[false,“突出显示”]。

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 you want to keep same Sundays enabled you can simply change the if condition that you are using for disabling them. Instead of:

如果您希望保持相同的星期日,您只需更改用于禁用它们的if条件。代替:

if (day == 0)

use

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

where availableDates is an Array that contains all the Sundays that you want to keep enabled.

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

Here a live sample:

这是一个现场样本:

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

Note that:

I've used dateFormat option when initializing the datepicker

我在初始化datepicker时使用了dateFormat选项

I've used $.datepicker.formatDate to format date in the "d-m-yy" format.

我使用$ .datepicker.formatDate以“d-m-yy”格式格式化日期。

I've removed the third optional tooltip parameter from the beforeShowDay function.

我从beforeShowDay函数中删除了第三个可选的tooltip参数。

#1