Disable Weekend (Saturday and Sunday) in Bootstrap Datepicker

nauna

SOLVED CLOSED ACTIVE ANSWERED
User: nauna
Posted: on Dec 19, 2019 01:17 AM
Forum: Bootstrap
Answer: 1
Views: 45636
Sample Code: Download

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>

Download FREE API for Word, Excel and PDF in ASP.Net

arunkurm...

0 2

Reply
ANSWER
User: arunkurmi
Replied: on Dec 19, 2019 02:08 AM
Report

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

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Disable Weekend (Saturday and Sunday) in Bootstrap Datepicker

Company

Explore

Follow us

Contact Us