Disable Weekend (Saturday and Sunday) in jQuery UI Datepicker

Last Reply 2 months ago By dharmendr

Posted 2 months ago

hello,

i am using jQuery UI date picker.

i want to disable weekend here.

https://jqueryui.com/datepicker/#date-range

 

Posted 2 months ago

Hi nauna,

To disable the weekends in jQuery UI Datepicker you need to set the beforeShowDay property value to $.datepicker.noWeekends.

Then all the Weekends will be disabled in the date picker control.

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

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery UI Datepicker Disable Weekend</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#txtDate").datepicker({
                defaultDate: "+1w",
                changeMonth: true,
                numberOfMonths: 1,
                beforeShowDay: $.datepicker.noWeekends
            });
        });
    </script>
</head>
<body>
    <input type="text" id="txtDate" />
</body>
</html>

Demo