Bootstrap Datepicker 限制选择的可用日期

Question

我正在使用 eternicode bootstrap-datepicker；

我想知道如何配置 Bootstrap Datepicker 以限制选择的可用日期。我的观点是，当某些数据在特定日期准备好时。该日期可由用户选择。

目前，我从现在开始限制 7 天。但是，周六和周日是没有数据的日子；

这样，我可以只显示日期范围，但这些范围之间没有“漏洞”。所以，我想知道如何配置 Bootstrap Datepicker 来限制从用户中选择的可用日期。

Answer 1

Bootstrap 本身没有我上次检查的内置日期选择器。但是，如果您谈论的是eternicode 写的bootstrap-datepicker third party library。我相信它支持与jquery datepicker 相同的事件。所以：

演出前 函数（日期）。默认值：$.noop

一个以日期为参数并返回下列值之一的函数：

• 未定义无效
• 布尔值，指示此日期是否可选
• 一个字符串，表示要应用于日期单元格的附加 CSS 类
• 具有以下属性的对象：
  • 启用：与上面的布尔值相同
  • 类：与上面的字符串值相同
  • 工具提示：通过 HTML 标题属性应用到该日期的工具提示

这样使用（下面的例子只允许选择周末和下面自定义数组中的两个日期）：

// use this to allow certain dates only
var availableDates = ["15-1-2014","16-1-2014"];

$(function()
{
    $('#txtDate').datepicker({ 
      beforeShowDay:
          function(dt)
          { 
            // use dt.getDay() to restrict to certain days of the week
            // or a custom function like "available" below to do more complex things
            return [dt.getDay() == 0 || dt.getDay() == 6 || available(dt), "" ];
          }
    });
});



function available(date) {
    dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
    if ($.inArray(dmy, availableDates) != -1) {
        return true;
    } else {
        return false;
    }
}

最后，working FIDDLE to show above in action.. 使用 jquery datepicker，但相同的区别...

Answer 2

制作如下：

var available_Dates = ["23/03/2014","21/03/2014"];
            $('.datepicker').datepicker({
                language: "pt-BR",
                autoclose: true,
                format: "dd/mm/yyyy",
                default: 'dd/mm/yyyy',
                beforeShowDay: function(date){
                    var formattedDate = $.fn.datepicker.DPGlobal.formatDate(date, 'dd/mm/yyyy', 'pt-BR');
                    if ($.inArray(formattedDate.toString(), available_Dates) == -1){
                        return {
                            enabled : false
                        };
                    }
                    return;
                }
            });