A client recently required a popup ASP.NET calendar control to use on their site. I thought we would share our solution to this.
If you are looking to add the popup in a seperate window, please see this post Create popup date picker in seperate window using ASP.NET calendar control
We’re going to do a “fake” popup using CSS and DIV as opposed to actually opening a new window.
First you need to add a calendar control to your page. Put the following code somewhere in your BODY section
<div id="dateField" style="display:none;">
Notice the OnSelectionChanged event. This is calling a method we will display later to handle the clicking of a date in the calendar.
We also need a textbox to put the resulting date, and also a link to open the calendar. The cal.png is just a calendar icon you can use whatever you like for the image.
<img src="cal.png" onclick="popupCalendar()" />
var dateField = document.getElementById('dateField');
// toggle the div
if (dateField.style.display == 'none')
dateField.style.display = 'block';
dateField.style.display = 'none';
This code established where the DIV block is and set it to visable (block).
Now we need to add the code to process all of this. Either put this code in your code behind or within <script runat=”server”> tag at the top of the page.
protected void calDate_SelectionChanged(object sender, EventArgs e)
txtDate.Text = calDate.SelectedDate.ToString("d");
Sub calDate_SelectionChanged(ByVal sender As Object, ByVal e As EventArgs)
txtDate.Text = calDate.SelectedDate.ToString("d")
This of course is very basic, I didn’t style anything, and I didn’t do anything with the results, but you should be able to figure out the rest.
That’s it, feel free to ask questions in the comments or email us.
Update: I’ve now included the source for this simple sample. You can get it here Popup calendar sample code
Update: If you are looking to add the popup in a seperate window, please see this post Create popup date picker in seperate window using ASP.NET calendar control