Friday, November 30, 2012

Disable weekends/Public Holidays / Saturday & Sunday / change disabled date color in jquery UI DatePicker

Here i will show how to disable WeekEnds or PublicHolidays / Saturday & Sunday in jquery UI datepicker...
Change color of the Disabled / enabled dates of the datepicker...



Default.aspx :

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="DisableWeekEnds._Default" %>
 
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <link href="css/smoothness/jquery-ui-1.8.23.custom.css" rel="stylesheet" type="text/css" />
    <link href="css/DatePickerSize.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
    
<%--to change colors of the dates Enaled / Disabled--%>
  
 <%-- <style type="text/css">
                
        .disabled span
        {
            color: black !important;
            background: red !important;
        }
        .enabled a
        {
            color: black !important;
            background: green !important;
        }
    </style>--%>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <script type="text/javascript">
        var dateRange = []; // ["2012/05/20", "2012/05/20"]; // yyyy/MM/dd
 
 
        function unavailable(date) {
 
            var startDate = new Date(dateRange[0]);
            var endDate = new Date(dateRange[1]);
            var day = date.getDay();
 
            if (date > startDate && date < endDate)
                return [false"disabled"];
            else if (day > 0 && day < 6)
                return [true"enabled"];
            else
                return [false"disabled"];
 
        }
 
        $(document).ready(function () {
            $('[id$=TextBox1]').datepicker({
                beforeShowDay: unavailable,
                dateFormat: 'mm-dd-yy',
                changeMonth: true,
                changeYear: true
            });
        });
 
    </script>
    <center>
        <h1>
            disable weekends / public holidays / saturday & sunday
        </h1>
        <br />
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    </center>
</asp:Content>

Download From HERE

No comments:

Post a Comment