Question

我从数据库中提取了一系列日期，我试图在datepicker上禁用它。下面的数组是我的数据库的结果。使用Jquery UI datepicker. Disable array of Dates作为指导，我尝试禁用数组中的日期。我的页面已连接到 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>和我自己的.js文件。

从我的HTML页面： <input id="resDate">

来自我的JavaScript文件：

$(document).ready(function () {
blackoutDates(); 
});
function blackoutDates() {
var unavailableDates = ["10/27/2018", "11/8/2018", "4/25/2018"]
$(function () {
        $("#resDate").datepicker({
            todayHighlight: true,
            beforeShowDay: function (date) {
                var string = jQuery.datepicker.formatDate('mm-dd-yy', date);
                return [unavailableDates.indexOf(string) == -1]
            }
        });
    });
}

在JSFiddle上，结果是日期完全不受影响（即没有禁用日期）。在我的页面上，我收到了错误＆＃34; Uncaught TypeError：无法读取属性＆＃39; formatDate＆＃39;未定义＆＃34;。由于该功能不起作用，我也尝试过：

$(document).ready(function () {
blackoutDates(); 
});
function blackoutDates() {
var unavailableDates = ["10/27/2018", "11/8/2018", "4/25/2018"]
$(function () {
        $("#resDate").datepicker({
            todayHighlight: true,
            beforeShowDay: function unavailable(date) {
                dmy = date.getDate() + "/" + (date.getMonth() + 1) + "/" + 
date.getFullYear();
                if ($.inArray(dmy, unavailableDates) == -1) {
                    return [true, "","Available"];
                } else {
                    return [false, "", "Unavailable"];
                }
            }
        });
    });
}

这并未禁用我的网页和JSFiddle上的任何日期。当我在使用Chrome进行调试时逐步执行此操作时，循环在5月5,2018之后中断。也许它有问题，因为它没有达到我的所有数组日期？

我真的很困惑自己。所有建议表示赞赏！谢谢！

Answer 1

您的第一个解决方案：

jQuery.datepicker.formatDate('mm-dd-yy', date)返回mm/dd/yyyy，但var unavailableDates的元素与"4/25/2018"类似。

您的第二个解决方案：

您的字符串格式与var unavailableDates不同。一个是mm/dd/yyyy，另一个是dd/mm/yyyy。

修正后，您的代码应该有效。

也许你已经知道，beforeShowDay需要返回一个数组：

由于API定义：

将日期作为参数并且必须返回数组的函数用：

[0]: true/false indicating whether or not this date is selectable
[1]: a CSS class name to add to the date's cell or "" for the default presentation
[2]: an optional popup tooltip for this date

另一点是var unavailableDates的每个元素都是字符串。但是beforeShowDay的参数是一个日期对象，我更喜欢用var unavailableDates预定义new Date()的每个元素

以下是我的解决方案

将var unavailableDates的每个元素更改为Date对象。比如new Date(2018, 09, 27)
从var unavailableDates获取new Set()，然后只需.has()进行简单检查dateStr是否存在set()。（您也可以使用Array.filter检查日期是否无法选择）。如果为true，则返回`[false，'你的css类'，'你的工具提示']，如果为false，则返回[true，''，null]

PS：使用Set()，我们可以避免一次又一次地循环数组，它会大大提高效率。

添加一个位于var unavailableDates的CSS类，您可以自行自定义CSS = .disable-day。

更新：为.Net添加了示例代码。

以下是工作样本：

$(document).ready(function () {
   blackoutDates(); 
});
function blackoutDates() {
    //assuming <%=DateTimeText%> is one string like mm-dd-yyyy;mm-dd-yyyy
    var unavailableAspxDatesString = '10-27-2018;11-08-2018;04-25-2018'   //= '<%=DateTimeText%>'
    let unavailableDateSet = new Set(unavailableAspxDatesString.split(';'))
    /*var unavailableDates = [new Date(2018, 09, 27), new Date(2018, 10, 08), new Date(2018, 03, 25)]
    let unavailableDateSet = new Set(unavailableDates.map(function(item){
      return jQuery.datepicker.formatDate('mm-dd-yy', item)
    }))*/
  $(function () {
      $("#resDate").datepicker({
          todayHighlight: true,
          beforeShowDay: function (calDate) {
              return unavailableDateSet.has(jQuery.datepicker.formatDate('mm-dd-yy', calDate)) ? [false, 'disable-day', 'no available day!!!'] : [true, '','']
              /*
              return unavailableDates.filter(function(item){
                return item.getTime()==calDate.getTime()}).length > 0 ? [false, 'disable-day',                     'no available day!!!'] : [true, '','']*/
              
          }
      });
  });
}

.disable-day{
  background-color:red;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input id="resDate">

使用Jquery datepicker禁用日期数组不工作 - 日期不会禁用

1 个答案: