将bootstrap-datepicker限制为仅限工作日?

SWL*_*SWL 22 jquery datepicker twitter-bootstrap bootstrap-datepicker

无论如何只允许在下面找到的引导日期选择器中选择工作日选项吗? https://github.com/eternicode/bootstrap-datepicker/

我正在实例化这样的日期选择器:

$('#datepicker').datepicker();

/* Update datepicker plugin so that MM/DD/YYYY format is used. */
$.extend($.fn.datepicker.defaults, {
    parse: function (string) {
        var matches;
        if ((matches = string.match(/^(\d{2,2})\/(\d{2,2})\/(\d{4,4})$/))) {
            return new Date(matches[3], matches[1] - 1, matches[2]);
        } else {
            return null;
        }
    },
    format: function (date) {
        var
        month = (date.getMonth() + 1).toString(),
        dom = date.getDate().toString();
        if (month.length === 1) {
            month = "0" + month;
        }
        if (dom.length === 1) {
            dom = "0" + dom;
        }
        return month + "/" + dom + "/" + date.getFullYear();
    }
});  
Run Code Online (Sandbox Code Playgroud)

谢谢你的帮助.

小智 32

来自https://github.com/eternicode/bootstrap-datepicker的最新版本已经可以选择禁用特定工作日的选择.来自文档:

daysOfWeekDisabled

字符串,数组.默认值:'',[]

应该禁用的星期几.值为0(星期日)至6(星期六).多个值应以逗号分隔.示例:禁用周末:'0,6'[0,6].

换句话说,只需像这样实例化你的日期选择器:

$('#datepicker').datepicker({
    daysOfWeekDisabled: [0,6]
});
Run Code Online (Sandbox Code Playgroud)

这是一个证明这一点的jsfiddle:http://jsfiddle.net/vj77M/1/

  • 您仍然可以通过键入日期来输入禁用日期。 (2认同)

Kat*_*ato 11

**更新**

Bootstrap datepicker现在有一个daysOfWeekDisabled选项.请参阅下面的@fin's答案.

**老答案**

这是一个工作演示

假设你的星期几星期天开始:

$(function() {
    function disableWeekends($this) {
        var $days = $this.find('.datepicker-days tr').each(function() {
            var $days = $(this).find('.day');
            $days.eq(0).addClass('old').click(false); //Sunday
            $days.eq(6).addClass('old').click(false); //Saturday
        });

    }

    $('#dp1').datepicker({
        format: 'mm-dd-yyyy'
    });

    // get instance of the jQuery object created by
    // datepicker    
    var datepicker = $('#dp1').data('datepicker').picker;

    // disable weekends in the pre-rendered version
    disableWeekends(datepicker);

    // disable weekends whenever the month changes
    var _fill = datepicker.fill;
    datepicker.fill = function() {
        _fill.call(this);
        disableWeekends(this.picker);
    };

});?
Run Code Online (Sandbox Code Playgroud)

如果没有,只需将$ days.eq(...)更改为正确的索引即可.

当然,这只包括点击事件,让你朝着正确的方向前进.我很确定键盘导航等其他东西可能需要解决.


编辑

对于最新版本,请使用此代码

// get instance of the jQuery object created by datepicker    
var datepicker = $('#dp1').data('datepicker');

// disable weekends in the pre-rendered version
disableWeekends(datepicker.picker);

// disable weekends whenever the month changes
var _fill = datepicker.fill;
datepicker.fill = function() {{
    _fill.call(this);
    disableWeekends(datepicker.picker);
}};
Run Code Online (Sandbox Code Playgroud)