Question

我使用的是eternicode bootstrap-datepicker;

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

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

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

Answer 1

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

<强> beforeShowDay 功能（日期）。默认值：$ .noop

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

未定义无效
布尔值，表示此日期是否可选
表示要应用于日期单元格的其他CSS类的字符串
具有以下属性的对象：
- 已启用：与上面的布尔值相同
- 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，但差别相同......

Answer 2

制作如下：

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

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

2 个答案: