Using a JavaScript Calendar Control in Master Pages

This article shows how to use a JavaScript Calendar control in master pages.

In my previous article JavaScript Calendar in ASP.NET 2.0 here, I discussed how to use a calendar control using java script. I got many emails from readers asking how to use this control with a master page. So here I am going to discuss about this.

In this article I am using a JavaScript file (Calendar.js) and a CSS file (Calendar.css). The JavaScript file has all functions and methods, which are used in calendar and CSS file has all calendar style sheets.

You can call JavaScript file on page like this:

<script language="javascript" src=Calendar.js type="text/javascript"></script>

And style sheet file like this:

<link href=Calendar.css rel="stylesheet" type="text/css">

Only diffrence is you have to change the ID of your control with the master page like this.

This is without the master page.

<form id="form1" runat="server">   
<asp:Label ID="lblDateSent" runat="server" Text="Posted on:" CssClass="graytextbold"></asp:Label>

 <input ID="PostedOn" runat="server" class="NormalTextBox" readonly="readOnly" type="text" />&nbsp;
<a onclick="showCalendarControl(PostedOn)" href="#">
<img src=calendar.gif style="width: 20px; height: 20px" border=0 /></a>
</form>

This is with the master page.

<asp:Label ID="lblDateSent" runat="server" Text="Posted on:" CssClass="graytextbold"></asp:Label>

<input ID="PostedOn" runat="server" class="NormalTextBox" readonly="readOnly" type="text" />&nbsp;

<a onclick="showCalendarControl(ctl00_ContentPlaceHolder1_PostedOn)" href="#">
<img src="calendar.gif" style="width: 20px; height: 20px" border=0 />
</a>

Only the changed line is onclick event(showCalendarControl(ctl00_ContentPlaceHolder1_PostedOn)). You can see id of your control in ViewSource.


Result will be same. For more details I am attaching my test application with both examples. Download it.