23

无论如何，是否只允许在下面找到的引导日期选择器中选择工作日？ 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();
    }
});

谢谢你的帮助。

4

4 回答 4

37

https://github.com/eternicode/bootstrap-datepicker的最新版本已经有一个选项来禁用特定工作日的选择。从文档：

daysOfWeekDisabled

字符串，数组。默认： ''， []

一周中应该禁用的天数。值为 0（星期日）到 6（星期六）。多个值应以逗号分隔。示例：禁用周末：'0,6'或[0,6].

换句话说，只需像这样实例化您的日期选择器：

$('#datepicker').datepicker({
    daysOfWeekDisabled: [0,6]
});

这是一个 jsfiddle 演示：http: //jsfiddle.net/vj77M/1/

于 2013-08-25T10:21:16.840 回答
11

** 更新 **

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

** 旧答案 **

这是一个工作演示

假设你的星期从星期日开始：

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

});​

如果没有，只需将 $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);
}};
于 2012-04-19T18:48:32.830 回答
1

你也可以试试。

onRender: function(date) {
    return date.getDay() == 0 || date.getDay() == 6 ? 'disabled' : '';
}

希望它可以帮助某人。:)

于 2018-03-17T04:43:54.100 回答
-1 
$(document).ready(function(){


var date_input=$('input[name="date"]'); 

var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";

date_input.datepicker({


format: 'dd/mm/yyyy',

container: container,

weekStart: 0,

daysOfWeekDisabled: "0,1,2,3,4,5",

daysOfWeekHighlighted: "6",

todayHighlight: true,

autoclose: true,


})

})
于 2017-07-12T06:29:49.863 回答