Disable Weekend (Saturday and Sunday) in Bootstrap Datepicker

Last Reply 5 months ago By arunkurmi

Posted 5 months ago

How to disable weekend in bootstrap datepicker

when i add beforeShowDay: $.datepicker.noWeekends

it stops working

please advice

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript">
    $(function () {
        var selectedDates = [];
        datePicker = $('[id*=txtdate]').datepicker({
            startDate: new Date(),
            minDate: 0,
            multidate: true,
            format: "mm/dd/yyyy",
            daysOfWeekHighlighted: "5,6",
            language: 'en', 
        });
        datePicker.on('changeDate', function (e) {
            if (e.dates.length <= 3) {
                selectedDates = e.dates;
                document.getElementById("<%=Button1.ClientID %>").click();
            } else {
                datePicker.data('datepicker').setDates(selectedDates);
                alert('You can only select 3 dates.');
            }
        });
    });
</script>

 

 

You are viewing reply posted by: arunkurmi 5 months ago.
Posted 5 months ago

Hi nauna,

To disable the weekends in Bootstrap Datepicker you need to set the daysOfWeekDisabled property value to [0, 6].

Then all the Weekends will be disabled in the datepicker control.

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap Datepicker Disable Weekend</title>
    <script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
    <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
    <link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
        media="screen" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var selectedDates = [];
            datePicker = $('[id*=txtdate]').datepicker({
                startDate: new Date(),
                minDate: 0,
                multidate: true,
                format: "mm/dd/yyyy",
                daysOfWeekHighlighted: "0,6",
                language: 'en',
                daysOfWeekDisabled: [0, 6]
            });
            datePicker.on('changeDate', function (e) {
                if (e.dates.length <= 3) {
                    selectedDates = e.dates;
                } else {
                    datePicker.data('datepicker').setDates(selectedDates);
                    alert('You can only select 3 dates.');
                }
            });
        });
    </script>
</head>
<body>
    <input type="text" id="txtdate" />
</body>
</html>

Demo