Bootstrap Datepicker限制要选择的可用日期
我正在使用eternicode bootstrap-datepicker;
我想知道如何配置Bootstrap Datepicker来限制要选择的可用日期。 我的观点是，某些数据在特定日期准备就绪。 该日期可由用户选择。
目前，我将在7天后限制。 但是，星期六和星期日是从未有过一些数据的日子;
通过这种方式，我可以显示一系列日期，但这些范围之间没有“漏洞”。 所以，我想知道如何配置Bootstrap Datepicker来限制从用户中选择的可用日期。
我检查过Bootstrap本身没有内置的datepicker。 但是，如果你在谈论eternicode编写的bootstrap- datepicker 第三方库 ..我相信它支持与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; } }
最后，使用jquery datepicker进行上面显示的工作FIDDLE ，但是相同的区别……
如下：
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; } });