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

问题描述

我正在使用 eternicode bootstrap-datepicker;

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

目前，我的限制是从现在起 7 天.然而，周六和周日是没有数据的日子；

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

解决方案

上次我检查过的 Bootstrap 本身没有内置的日期选择器.但是，如果您谈论的是 bootstrap-datepicker 第三方库，eternicode 写道.. 我相信它支持与 jquery datepicker 相同的事件.. 所以:

beforeShowDay函数(日期).默认值:$.noop

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

• 未定义为无效
• 布尔值，表示该日期是否可选
• 一个字符串，表示要应用于日期单元格的其他 CSS 类
• 具有以下属性的对象:
  • 启用:与上面的布尔值相同
  • classes:与上面的字符串值相同
  • 工具提示:通过标题 HTML 属性应用于此日期的工具提示

使用类似这样的东西(下面的例子只允许选择周末和下面自定义数组中的两个日期):

//使用它来只允许某些日期var availableDates = ["15-1-2014","16-1-2014"];$(函数(){$('#txtDate').datepicker({在ShowDay之前:功能(dt){//使用 dt.getDay() 限制一周中的某些天//或者像下面的available"这样的自定义函数来做更复杂的事情返回 [dt.getDay() == 0 ||dt.getDay() == 6 ||可用(DT)，"];}});});功能可用(日期){dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();如果($.inArray(dmy，availableDates)！= -1){返回真；} 别的 {返回假；}}

最后，一个 工作 FIDDLE 显示上面的操作 .. 使用 jquery 日期选择器，但相同的区别......

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屋！