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.

Can I suggest you accept fin's answer? It's much simpler than the current highest-upvoted answer and uses a built-in feature of the library; it'd be nice if it was the first answer people saw when they visited this page. — Mark Amery, Jan 11 '14 at 16:22

score 39 · Accepted Answer · edited Jan 11 '14 at 16:20

39

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/

edited Jan 11 '14 at 16:20

Mark Amery

143,130
81
406
459

answered Aug 25 '13 at 10:21

fin

519
4
7

2

You are still able to input a disabled date by typing the date. – Jeremy Dec 23 '15 at 12:24

Kato · Answer 2 · 2014-01-11T17:23:41.000

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

+1 added an small edit since your code didn't work for me. Probably you used an older version — Claudio Redi, May 29 '12 at 19:12
@SWL if it works perfectly why don't you mark it as solution? It helps the one who answered this in many ways. — Máthé Endre-Botond, Jul 11 '12 at 13:12
@ClaudioRedi, I am trying to get this to work, but as an optional paramater. I created a new question here if you would be so kind to take a look http://stackoverflow.com/questions/14829024/exclude-weekends-optionally-from-datepicker#comment20780275_14829024 — Redwall, Feb 12 '13 at 13:23

score 1 · Answer 3 · answered Mar 17 '18 at 04:43

1

also you can try it.

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

hope it helps someone. :)

answered Mar 17 '18 at 04:43

Магнайбаяр Ганзориг

154
1
2
10

score -1 · Answer 4 · edited Jul 12 '17 at 09:46

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


})

})

edited Jul 12 '17 at 09:46

Bugs

4,491
9
32
41

answered Jul 12 '17 at 06:29

Srinadh Reddy

1
2

Limit bootstrap-datepicker to weekdays only?

4 Answers4

daysOfWeekDisabled

Linked

Related