Saturday, March 28, 2009

Calendar Using JavaScript with MastePage

Many people using master page might wonder why calendar control is not opening if they are using master page in their normal aspx page., If you add and call the JavaScript cleaner control similar to the normal aspx page calendar won’t be displayed in the page using master page….so I just posting this article to show you how this works….
There is no extra or special coding for this…
First, add JavaScript/CSS reference in MASTER page like below,
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Maste Page</title>
    <script src="\calendar\calendar.js" type="text/javascript"></script>
    <link href="\calendar\Calendar.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>
Then call the JavaScript function to show the calendar based on the JavaScript you are using. Here my function is
showCalendar(<TextBox Name>,<Date Format>)
instead of passing control name we are passing ID of the control. This is the only change you have to remember…
<asp:TextBox ID="txtDateCreated" runat="server"></asp:TextBox><input id="DateCreated" onclick="return showCalendar('ctl00_ContentPlaceHolder1_txtDateCreated', '%m/%d/%Y',true);" type="image" src="calendar/calendar.gif">
Execute the code…see that wonderful calendar.

2 comments:

Anonymous said...

Code Converting Control in your right panel does not work correctly... have a look at it !

Haddock said...

This is informative.