Introduction
We often need a calendar to give user a way to select date.We know that we
have lots of JavaScript calendar already available in the market.But some time
we need a calendar from where we can protect user to select only few date not
all date and the best use for that is ASP.NET calendar control we can do lots
of function with asp.net calendar control...like bind date from database etc
which hard to do with JS calendar.
Background
Here is the few key feature of this asp.net popup calendar....
1>show the calendar by finding out the anchor position.
2>Auto hiding the calendar on focus out work for IE,Firefox and other
3>Customize the calendar control as you want
Using the code
In the page where you want to add the calendar just use this
type of code in body....
<asp:TextBox runat="server" ID="Date" ToolTip="Please select the date that the site was installed"></asp:TextBox>
<a id="cananc" href="javascript:opencal();">
<img src="calendar/cal.jpg" alt="Click here to select a date" width="20" height="20"
border="0"></a>
now at the top of that page use the following code.....
<script type="text/javascript" language="javascript" src="calendar/AnchorPosition.js"></script>
<script type="text/javascript" language="javascript">
var calendar_window=window;
function opencal()
{
var myac=getAnchorWindowPosition('cananc');
calendar_window=window.open('calendar/calendar.aspx?formname=form1.Date','calendar_window','width=200,height=250,Top='+myac.y+',Left='+myac.x+'');
calendar_window.focus();
}
if (window.captureEvents){
window.captureEvents(Event.CLICK);
window.onclick= handle;
}
else
document.onclick=handle;
function handle(e) {
if(calendar_window.name=='calendar_window')
{
calendar_window.close();
}
}
</script>
Remember to send form id to the calendar.aspx page while opening the popup.