如何禁用日期选择器日历中的特定日期答案

【问题标题】：How to disable particular dates in datepicker's calender如何禁用日期选择器日历中的特定日期
【发布时间】：2020-01-11 20:07:15
【问题描述】：

我需要在 JQuery- Bootstrap Datepicker 的一个月内禁用多个日期。正如我在 SO 和其他地方尝试了多个答案一样。但是我的问题没有解决。因为我有日期列表，所以我需要禁用日期选择器。但是，日期选择器没有响应日期残疾。

我曾经使用 JQuery 和 boostrap 来查看 Datepicker。使用 CDN 加载脚本。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i></div>
<input value="" readonly="" class="form-control" name="doi" id="doi" type="text">
</div>

<script type='text/javascript'>
var array = ["09/14/2019","09/15/2019","09/16/2019"];

$('#doi').datepicker({
 beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('mm/dd/yy', date);
        return [ array.indexOf(string) == -1 ]
    },
    daysOfWeekDisabled: [0],   //Disable sunday
    autoclose:true,
})  ;
  </script>

执行此脚本后，我收到与 .formDate() 相关的错误
Uncaught TypeError: Cannot read property 'formatDate' of undefined

但是在JQuery CDN之后添加：<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" ></script>
后，这个错误已经解决了但是Disabling date还是不行。

预期：Disable : 09/14/2019,09/15/2019,09/16/2019 来自日期选择器。

【问题讨论】：

如果你使用引导添加bootstrap-datepicker.min.js和bootstrap-datepicker.css并尝试
@NijinKoderi 谢谢.. 但仍然重复同样的错误。 (index):10996 Uncaught TypeError: Cannot read property 'formatDate' of undefined
@nithin jQuery.datepicker.formatDate() 不适用于bootstrap，它适用于jQuery datepicker
@nithin 试试我的新解决方案。 Jquery Datepicker 的第一个解决方案，第二个解决方案是 bootstrap Datepicker

标签： jquery jquery-ui datepicker bootstrap-datepicker bootstrap-datetimepicker

【解决方案1】：

你需要添加jquery-ui.min.js和jquery-ui.css

var array = ["2019-09-14","2019-09-15","2019-09-16"]

$('#doi').datepicker({
    beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [ array.indexOf(string) == -1 ]
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/vader/jquery-ui.css" rel="stylesheet"/>


<input id="doi" />

【讨论】：

@nithin_kumar 乐于提供帮助，不要忘记将回复标记为已接受，以便让未来的访问者清楚了解；)
@Ninjin Koderi 感谢您的回复。但这也行不通。因为我也在使用bootstrap-datepicker.min.js 进行样式设置和其他功能。在包含所有你的 CDN 和脚本内容之后，我的日期选择器变得不变（既没有出现任何错误，也没有禁用日期）。
那你为什么在上面写成jquery datepicker??
因为我正在使用：<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
那是给jQuery 对吧？不适用于日期选择器。

【解决方案2】：

为Bootstrap Datepicker 尝试以下解决方案。不要混淆两者。来自jQuery.datepicker.formatDate('mm/dd/yy', date)，很明显您正在尝试使用Jquery Datepicker。

var datesForDisable = ["2019-09-14","2019-09-15","2019-09-16"]

$("#datepicker").datepicker({
            format: 'dd/mm/yyyy',
            autoclose: true,
            weekStart: 1,
            calendarWeeks: true,
            todayHighlight: true,
            beforeShowDay: function (currentDate) {
                var dayNr = currentDate.getDay();
                var dateNr = moment(currentDate.getDate()).format("DD-MM-YYYY");
                if (datesForDisable.length > 0) {
                     for (var i = 0; i < datesForDisable.length; i++) {                        
                       if (moment(currentDate).unix()==moment(datesForDisable[i],'YYYY-MM-DD').unix()){
                                return false;
                           }
                        }
                    }
                    return true;
                }
            })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js"></script>
<input id="datepicker">

【讨论】：

感谢好友的支持！！ :) 我得到了预期的结果。
哈哈！乐于提供帮助，不要忘记将回复标记为已接受，以便让未来的访问者清楚了解；）
我会的。因为名气不大。我现在无法标记。

【解决方案3】：

在为这个问题工作和搜索很多之后，我会得到我的答案。使用 JQuery CDN：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

var datearray = ["09/14/2019","09/15/2019","09/16/2019"];
$('#doi').datepicker({
    format: 'mm/dd/yyyy',       
    datesDisabled: datearray,
    daysOfWeekDisabled: [0],   //Disable sunday
    autoclose:true,
    todayHighlight: true,
});

在这里，datesDisabled: 对我起着至关重要的作用。
感谢您的所有建议和回复。

【讨论】：