Bootstrap Datepicker限制可用日期進行選擇

我正在使用eternicode bootstrap-datepicker;Bootstrap Datepicker限制可用日期進行選擇

我想知道如何配置Bootstrap Datepicker來限制可用的日期被選中。我的觀點是，某些數據在特定日期準備就緒。該日期可以由用戶選擇。

目前，我受限於7天后。但是，週六和週日是從未有過數據的日子;

通過這種方式，我可以顯示一系列的日期，但在這些範圍之間沒有「漏洞」。所以，我想知道如何配置Bootstrap Datepicker來限制從用戶中選擇日期。

來源

2014-01-15 shabang

據我所知是沒有的DatePicker集成自舉。您是否使用第三方日期選擇器（可能是JQuery-ui？） –

[The docs]（http://www.eyecon.ro/bootstrap-datepicker/）給出了禁用日期的示例。只需根據需要修改「返回」即可。 – Blazemonger

對不起，你是完全正確的。我使用eternicode bootstrap-datepicker – shabang

Bootstrap本身沒有內置日期選擇器，最後我檢查了一下。然而，如果你正在談論的是bootstrap-datepicker third party library寫道：eternicode。我相信它支持相同的事件jQuery的日期選擇器..所以：

beforeShowDay 功能（日期）。默認：$ .noop

接受一個日期作爲參數，並返回下列值之一的功能：

不確定有沒有效果
布爾值，指示是否在此日期是可選擇的
的String表示附加CSS類申請日期的細胞
一個對象，具有以下性質：
- 啓用：一樣的布爾值以上
- 類：與以上相同
- 提示字符串值：適用於這個日期的工具提示，通過標題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 datepi克爾，但相同的區別...

來源

2014-01-15 19:27:45 erikrunia

你是對的！我正在使用eternicode bootstrap-datepicker – shabang

使用版本1.3.1+，您可以簡單地使用'datesDisabled'選項：http://bootstrap-datepicker.readthedocs.org/en/latest/options.html#datesdisabled –

製作如下：

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

來源

2014-03-26 20:35:18 shabang

does not work，do你使用任何其他插件？ –

也不適合我 – arno

Bootstrap Datepicker限制可用日期進行選擇

回答

相關問題