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

我正在使用eternicode bootstrap-datepicker;

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

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

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

解决方法

我检查过Bootstrap本身没有内置的datepicker.如果你在谈论 eternicode写的 bootstrap-datepicker third party library ..我相信它支持与jquery datepicker相同的事件..所以：

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;
    }
}

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

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

解决方法

相关文章