Limit bootstrap-datepicker to weekdays only?

Question

Is there anyway to allow only weekday selections in the bootstrap date picker found below? https://github.com/eternicode/bootstrap-datepicker/

I'm instantiating the date picker like this:

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

Thanks for any help.

Answer 1

The latest version from https://github.com/eternicode/bootstrap-datepicker already has an option to disable selection of particular weekdays. From the docs:

daysOfWeekDisabled

String, Array. Default: ‘’, []

Days of the week that should be disabled. Values are 0 (Sunday) to 6 (Saturday). Multiple values should be comma-separated. Example: disable weekends: '0,6' or [0,6].

In other words, just instantiate your datepicker like this:

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

Here's a jsfiddle demonstrating this: http://jsfiddle.net/vj77M/1/

Answer 2

** UPDATE **

Bootstrap datepicker now has a daysOfWeekDisabled option. See @fin's answer below.

** OLD ANSWER **

Here is a working demo

Assuming your weeks starts on sunday:

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

});​

If not, just change $days.eq(...) to the correct indices.

Of course, this only covers the click event and gets you headed in the right direction. I'm quite sure other things like keyboard navigation may need to be addressed.

---

EDIT

For latest version use this code where appropiate

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

Answer 3

also you can try it.

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

hope it helps someone. :)

Answer 4

$(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,


})

})