Bootstrap Datepicker限制可供选择的可用日期 [英] Bootstrap Datepicker restrict available dates to be selected

问题描述

我正在使用eternicode bootstrap-datepicker;

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

目前我在7天之内受到限制。然而，星期六和星期日是几天，从来没有一些数据;

这样，我可以显示一系列日期，但是这些范围之间没有洞。所以，我想知道如何配置Bootstrap Datepicker以限制从用户选择的可用日期。

解决方案

引导本身没有一个内置的datepicker最后我检查。但是，如果您正在谈论引导日期戳记第三方库 ：//github.com/eternicode> eternicode 写..我相信它支持与jquery datepicker相同的事件..所以：

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

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

• 未定义为无效


• 一个布尔值，表示此日期是否可选


• 一个表示应用于日期单元格的CSS类的字符串


• 具有以下属性的对象：
  
  
  
  • 已启用：与以上的布尔值
  
  
  • 类：与上面的字符串值相同
  
  
  • 工具提示：通过标题HTML属性应用于此日期的工具提示
  li>
  

使用这样的东西（下面的例子只允许周末和自定义的两个日期数组下面要选择）：

  //使用此选项只允许某些日期
 var availableDates = [15 -1-2014，16-1-2014]; 
 
 $（function（）
 {
 $（'＃txtDate'）。datepicker（{
 beforeShowDay：
 function（dt）
 {
 //使用dt.getDay（）限制一周中的某些天
 //或下面的可用自定义函数来执行更复杂的事情
 return [dt。 getDay（）== 0 || dt.getDay（）== 6 || available（dt），]; 
} 
}）; 
}）; 
 
 
 
功能可用（日期）{
 dmy = date.getDate（）+ - +（date.getMonth（）+ 1）+ + date.getFullYear（）; 
 if（$ .inArray（dmy，availableDates）！= -1）{
 return true; 
} else {
 return false; 
} 
} 
  

最后，一个使用FIDDLE显示上面的操作 ..使用jquery datepicker，但相同的差异...

I am using eternicode bootstrap-datepicker;

I would like to know how to configure Bootstrap Datepicker to restrict available dates to be selected. My point is, when some data is ready in a particular date. That date can be selected by user.

At the current point, I am restricting by 7 days from now. However, Saturday and Sundays are days which never have some data;

In this way, I can just show a range of dates, but no "holes" between those ranges. So, I would like to know how to configure Bootstrap Datepicker to restrict available dates to be selected from user.

解决方案

Bootstrap itself does not have a built in datepicker last i checked. If however you are talking about the bootstrap-datepicker third party library that eternicode wrote.. I believe it supports the same events as the jquery datepicker.. so:

beforeShowDay Function(Date). Default: $.noop

A function that takes a date as a parameter and returns one of the following values:

• undefined to have no effect
• A Boolean, indicating whether or not this date is selectable
• A String representing additional CSS classes to apply to the date’s cell
• An object with the following properties:
  • enabled: same as the Boolean value above
  • classes: same as the String value above
  • tooltip: a tooltip to apply to this date, via the title HTML attribute

usage something like this (below example only allows weekends and the two dates in the custom array below to be selected):

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

Lastly, a working FIDDLE to show above in action.. using jquery datepicker, but same difference...

这篇关于Bootstrap Datepicker限制可供选择的可用日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！