我正在使用 eternicode bootstrap-datepicker;
我想知道如何配置 Bootstrap Datepicker 来限制可供选择的可用日期。我的意思是,当某些数据在特定日期准备就绪时。该日期可以由用户选择。
目前,我限制从现在起 7 天。然而,周六和周日是永远不会有一些数据的日子;
通过这种方式,我可以只显示一个日期范围,但这些范围之间没有“空洞”。所以,我想知道如何配置 Bootstrap Datepicker 以限制从用户选择的可用日期。
最佳答案
上次我检查时,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,但相同的区别...
关于javascript - Bootstrap Datepicker 限制要选择的可用日期,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21146382/