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