asp.net consultancy chorley ASP.NET Server Side Scripting Wigan
Website Development Radcliffe

IT Services And Support

Email : ren@techsolus.co.uk
Mobile Phone : 0788 68 41 411
Answerphone : 01204 469683
bespoke invoice systems Standish Information Technology Advice Worsley
    development systems Ramsbottom
data manipulation Farnworth access databases Whitefield SQL connections Atherton
online accessible software Leyland software compatible Coppull


Get connected and Online Tottington
remote management Makerfield code and design Aspull

ASP.NET Popup Calendar MADE SIMPLE! - 21/10/2010

Here's another shining example of making complicated things complicated for complicated's sake. 

You have a textbox on a page to take a date.
You wish to open ASP.NET's really simple calendar control to make selecting the date so much easier.

...Lets do it.

On the main page, where your textbox awaiting the date lives, you will have the following...

<asp:textbox id = "cal" runat = "server" />

Now we're going to add a javascript link to open a new "popup" window.  So now we have...

<asp:textbox id = "cal" runat = "server" />

<a href = "javascript:void(0)" onclick = "window.open('http://www.mysite.co.uk/calendar.aspx?','LinkName','height=300, width=300,scrollbars=no')">
 Calendar
</a>

And that's all we need to do on the main page.  The javascript link opens a small window, 300 by 300 pixels, with no scrollbars or anything else fancy.  If you wish to alter the size, change the numbers.

You'll note the page the javascript is popping up is called calendar.aspx.  So now we need to create calendar.aspx.

Here's the entire code for calendar.aspx.

<script runat = "server">

sub docal(sender as object, e as eventargs)
 myj.text = "<scrip type=""text/javascrip"">"
 myj.text = myj.text & vbcrlf
 myj.text = myj.text &  "window.opener.document.getElementById('cal').value = '"
 myj.text = myj.text & cal.selecteddate.toshortdatestring
 myj.text = myj.text & "';"
 myj.text = myj.text & vbcrlf
 myj.text = myj.text & "window.close();"
 myj.text = myj.text & vbcrlf
 myj.text = myj.text & "</scrip>"

 myj.text = replace(myj.text, "scrip", "script")
end sub

</script>

<html>
<head>

<title>
 Calendar
</title>

<asp:literal id = "myj" runat = "server" />

</head>
<body>
<form runat = "server">

<asp:calendar id = "cal"
              OnSelectionChanged = "docal"
              runat = "server"
              />

</form>
</body>
</html>

So...er...what's happening?  Well the ASP.NET Calendar Control is very simple.

<asp:calendar id = "cal"
              OnSelectionChanged = "docal"
              runat = "server"
              />

If you wish you can find countless ways of altering the display, the layout and how it works, but for simplicity, when this one has the selected date changed if calls the ASP.NET serverside script "docal".  One handy thing to note, it only calls the "docal" script when the DATE is selected and not a new month or whatnot.

So what is in "docal"?

 myj.text = "<scrip type=""text/javascrip"">"
 myj.text = myj.text & vbcrlf
 myj.text = myj.text &  "window.opener.document.getElementById('cal').value = '"
 myj.text = myj.text & cal.selecteddate.toshortdatestring
 myj.text = myj.text & "';"
 myj.text = myj.text & vbcrlf
 myj.text = myj.text & "window.close();"
 myj.text = myj.text & vbcrlf
 myj.text = myj.text & "</scrip>"

 myj.text = replace(myj.text, "scrip", "script")

All I'm doing here is creating javascript text to be inserted on the page when it reloads.  The final javascript will look like this

<scrip type="text/javascript">
window.opener.document.getElementById('cal').value = '16/10/2010';
window.close();
</script>

And that little javascript there will place the selected date into the parent window's "cal" textbox.  Note the date above.  In the ASP.NET serverside script we placed the chosen, selecteddate into the javascript.  it's in the line

 myj.text = myj.text & cal.selecteddate.toshortdatestring

And that does it!  I've seen on the web various bit of software and additional classes and plugins for ASP.NET to make this work.  I'm sure they are prettier but certainly not as simple.


Happy programming, Ren.


 

Post A Comment

Name Comment
Simon Cowgill That does make something of a mockery of the add-ons that I've seen advertised.
programming services asp.net specialist
Valid XHTML 1.0 Transitional
Admin
GD