Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / ASP.NET

jQueryUI DatePicker: Disable days in a week

4.87/5 (8 votes)
25 Jul 2011CPOL 34K  
How to disable days in a week in the jQueryUI DatePicker.

We already know how to use the jQuery UI DatePicker in ASP.NET. Here is a good reference.


I'm working with people who have a need for a DatePicker where users can only select Wednesday, Thursday, and Friday. And in addition, the user will not able to select any past date either. Following are the steps:


Make sure you add the following js and css files.



  • jquery-1.4.1.min.js
  • jquery.ui.core.js
  • jquery.ui.datepicker.js
  • jquery-ui-1.8.8.custom.css

Now paste the following code:


HTML
<script type="text/javascript">
    $(function () {
        var date = new Date();
        var currentMonth = date.getMonth(); // current month
        var currentDate = date.getDate(); // current date
        var currentYear = date.getFullYear(); //this year
        $("#<%= tbxRequestDeliveryDate.ClientID %>").datepicker({
            changeMonth: true, // this will allow users to chnage the month
            changeYear: true, // this will allow users to chnage the year
            minDate: new Date(currentYear, currentMonth, currentDate),
            beforeShowDay: function (date) {
                if (date.getDay() == 0 || date.getDay() == 1 || date.getDay() == 6) {
                    return [false, ''];
                } else {
                    return [true, ''];
                }
            }
        });
    });
</script>
<asp:TextBox ID="tbxRequestDeliveryDate" runat="server" CssClass="text"></asp:TextBox>

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)