从html datepicker jquery禁用特定日期答案

【问题标题】：disabling specific dates from html datepicker jquery从html datepicker jquery禁用特定日期
【发布时间】：2015-07-31 15:07:57
【问题描述】：

大家好，我正在尝试在我的网页中设置一个日期选择器并禁用其中的一些日期，以便它无法显示
这是代码：

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Untitled Document</title>

        <link href="jquery-ui/jquery-ui.css" rel="stylesheet">
        <script src="jquery-ui/external/jquery/jquery.js" ></script>
        <script src="jquery-ui/jquery-ui.js"></script>

        <script>

            /** Days to be disabled as an array */
            var disableddates = ["20-5-2015", "12-11-2014", "12-25-2014", "12-20-2014"];

            function DisableSpecificDates(date) {

                var m = date.getMonth();
                var d = date.getDate();
                var y = date.getFullYear();

                // First convert the date in to the mm-dd-yyyy format 
                // Take note that we will increment the month count by 1 
                var currentdate = (m + 1) + '-' + d + '-' + y;

                // We will now check if the date belongs to disableddates array 
                for (var i = 0; i < disableddates.length; i++) {

                    // Now check if the current date is in disabled dates array. 
                    if ($.inArray(currentdate, disableddates) != -1) {
                        return [false];
                    }
                }
            }

            $(function () {
                $("#date").datepicker({
                    beforeShowDay: DisableSpecificDates
                });
            });
        </script>
    </head>

    <body>
        <input id="date" type="text">
    </body>
</html>

但由于某种原因它无法正常工作...日期选择器甚至不显示有人可以帮忙吗

【问题讨论】：

请发布出现在您的控制台上的 javascript 错误。您是否尝试使用 Chrome 中的开发者工具或类似工具？

标签： javascript jquery web datepicker

【解决方案1】：

试试这个，在下面运行这个代码。第一个日期我在当天添加了一个 0，以便它与比较中的格式匹配。

/** Days to be disabled as an array */
var disableddates = ["20-05-2015", "12-11-2014", "12-25-2014", "12-20-2014"];


function DisableSpecificDates(date) {
    var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
    return [disableddates.indexOf(string) == -1];
  }
  /*
var m = date.getMonth();
var d = date.getDate();
var y = date.getFullYear();

// First convert the date in to the mm-dd-yyyy format 
// Take note that we will increment the month count by 1 
var currentdate = (m + 1) + '-' + d + '-' + y ;

// We will now check if the date belongs to disableddates array 
for (var i = 0; i < disableddates.length; i++) {

// Now check if the current date is in disabled dates array. 
if ($.inArray(currentdate, disableddates) != -1 ) {
return [false];

}
}

}*/


$(function() {
  $("#date").datepicker({
    beforeShowDay: DisableSpecificDates
  });
});

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>

  <link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
</head>

<body>

  <input id="date" type="text">


</body>

</html>

【讨论】：

这甚至不打开日期选择器

【解决方案2】：

这个答案是基于 Thomas 的答案，这里我在PrepareDate 的DisableSpecificDates 函数中添加了noweekends 功能，以便在beforeShowDay 中使用，例如：beforeShowDay:PrepareDate

function DisableSpecificDates(date) {
    var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
    return [disableddates.indexOf(string) == -1];
    }
    function PrepareDate(date){
    if ($.datepicker.noWeekends(date)[0]) {
    return DisableSpecificDates(date);
    } else {
    return $.datepicker.noWeekends(date);
    }
}

【讨论】：

【解决方案3】：

一周中的禁用日

<div class="container">
    <div class="col-sm-6" style="height:130px;">
        <div class="form-group">
            <div class='input-group date' id='datetimepicker11'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar">
                    </span>
                </span>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $('#datetimepicker11').datetimepicker({
                daysOfWeekDisabled: [0, 6]
            });
        });
    </script>
</div>

【讨论】：