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

mee*_*ick 8 javascript jquery datepicker twitter-bootstrap

我正在使用eternicode bootstrap-datepicker;

我想知道如何配置Bootstrap Datepicker来限制要选择的可用日期.我的观点是,某些数据在特定日期准备就绪.该日期可由用户选择.

目前,我将在7天后限制.然而,星期六和星期日是从未有过一些数据的日子;

通过这种方式,我可以显示一系列日期,但这些范围之间没有"漏洞".所以,我想知道如何配置Bootstrap Datepicker来限制从用户中选择的可用日期.

eri*_*nia 12

最后我检查了Bootstrap本身没有内置的datepicker.然而,如果你正在谈论的自举日期选择第三方库eternicode写了..我相信它支持相同的事件jQuery的日期选择器..所以:

beforeShowDay 函数(日期).默认值:$ .noop

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

  • 未定义无效
  • 一个布尔值,指示此日期是否可选
  • 一个String,表示要应用于日期单元格的其他CSS类
  • 具有以下属性的对象:
    • enabled:与上面的布尔值相同
    • classes:与上面的String值相同
    • 工具提示:通过标题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;
    }
}
Run Code Online (Sandbox Code Playgroud)

最后,一个有效的FIDDLE显示在行动中 ..使用jquery datepicker,但同样的区别......