javascript - Bootstrap Datepicker 限制要选择的可用日期

Question

我正在使用 eternicode bootstrap-datepicker；

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

目前，我限制从现在起 7 天。然而，周六和周日是永远不会有一些数据的日子；

通过这种方式，我可以只显示一个日期范围，但这些范围之间没有“空洞”。所以，我想知道如何配置 Bootstrap Datepicker 以限制从用户选择的可用日期。

Answer 1

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

演出日之前功能(日期)。默认值:$.noop

将日期作为参数并返回以下值之一的函数:

• 未定义无效
• 一个 bool 值，表示这个日期是否可选
• 一个字符串，表示应用于日期单元格的附加 CSS 类
• 具有以下属性的对象:
  • 启用:与上面的 bool 值相同
  • 类:与上面的字符串值相同
  • 工具提示:通过标题 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，但相同的区别...