Create popup date picker using ASP.NET calendar control
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;">
<asp:Calendar id="calDate"
OnSelectionChanged="calDate_SelectionChanged"
Runat="server" />
</div>
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.
<asp:TextBox
id="txtDate"
Runat="server" />
<img src="cal.png" onclick="popupCalendar()" />
You’ll notice the onclick event on the tag. You need to create some javascript to open the popup window. Put the following in your HEAD section.
<script type="text/javascript">
function popupCalendar()
{
var dateField = document.getElementById('dateField');
// toggle the div
if (dateField.style.display == 'none')
dateField.style.display = 'block';
else
dateField.style.display = 'none';
}
</script>
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.
C#
protected void calDate_SelectionChanged(object sender, EventArgs e)
{
txtDate.Text = calDate.SelectedDate.ToString("d");
}
VB.NET
Sub calDate_SelectionChanged(ByVal sender As Object, ByVal e As EventArgs)
txtDate.Text = calDate.SelectedDate.ToString("d")
End Sub
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
Leave a Comment
If you would like to make a comment, please fill out the form below.
Hello!
Very Interesting post! Thank you for such interesting resource!
PS: Sorry for my bad english, I’v just started to learn this language
See you!
Your, Raiul Baztepo
its not working
Hi supriya,
Can you explain further what is not working and I can try to help. Thanks!
Hello !!!
My name is Piter Kokoniz. oOnly want to tell, that your blog is really cool
And want to ask you: is this blog your hobby?
Sorry for my bad english:)
Thank you!
Your Piter Kokoniz, from Latvia
Hi Pita,
It’s a hobby and a job! I’m part of Divergence Hosting which is a hosting company that also helps its clients with their development needs and also freelance’s projects. Glad you enjoy the blog!
Thank you, i follow your instruction, it works nicely!
Hello,
Yr code is nicely working in a website which has only one webform, but it is not working in a website which has many forms. Help me!
Kirutheeka
Thanks for your comment Kirutheeka, but I am not sure what you mean? ASP.NET operates on a one form per page basis, so I’m not sure how you are working more than 1 form on the page. Can you provide more details or email me your code? I can help take a look. Thanks.
Hi I’m learning asp.net and was struggling using the calendar control in .net - this seems to be the best option. thannks
Hi,
thanks for your posting, this looks like exactly what I need, however, I am getting an error. Well two actually:
Error 2 The name ‘txtDate’ does not exist in the current context
Error 3 The name ‘calDate’ does not exist in the current context
My aspx form does not seem to be able to see my code behind code.
I have copied your code verbatim into a new project. I wondered if there was an environment option somewhere that is preventing this from working? Both files are in the same folder. The codefile reference looks correct.
Any ideas?
Many thanks.
Hi Craig,
That seems strange, did you download the sample code provided? I’ve tested that and it should work fine. Were you able to get the sample code to work for you? You can send me your code and I can take a look for you.
I have managed to make this work using the following code:
protected void calDate_SelectionChanged(object sender, EventArgs e)
{
Calendar MyCalendar = (Calendar)FindControl(”CalDate”);
TextBox MyTextBox = (TextBox)FindControl(”txtDate”);
MyTextBox.Text = MyCalendar.SelectedDate.ToString(”d”);
}
Although I am still unsure why it works or why your code does not work when others seem to use it straight away. I guess it is an environmental setting on my install of Visual Studio. I found the code on the net.
Thanks for the post. It really helped me.
I’m facing a weird problem. When I choose the date on the calender, it picks up time and the date.I want only the date like in your example. Your sample code works perfectly fine. Any idea, if I missed on something?
Hi swetha,
Just make sure you are doing the ToString(”d”) with the field as that should strip the time away.
Thank you so much. It worked. Your sample code didn’t had tostring(”d”) but it worked fine. Is it depending on something else?
Great post and very useful. I have it working perfectly with the exception of the Next and Previous Month options. When they’re selected the calendar goes. You then have to click on the icon again and the selected month is shown. This is a bit of a pain - is there any way around this?
Thanks, Mike
I am using this code along with master page concept , my problem is when ever I change the month the calender is disappearing, again i have to hit the image button to see calendar
do i have to make any changes to the code in .aspx page??
TIA
As there is an error when trying to change month (the calendar goes to “none” display style) I added this code to check if my date box is “empty” on if you are doing a “post back”.
code————
if(((document.getElementById(”txt_fecha”).value == “”) || (document.getElementById(”txt_fecha”).value == null)) && (document.referrer.search(”insert_event”) != -1 )){
document.getElementById(’dateField’).style.display = ‘block’;
}
Code ——–
“text_fecha” is the ID of my date textbox
and “insert_event.aspx” is the name of my page (this is to check postback)
I added this before the end of to be sure the content (date text box) has been loaded.
Hope this helps some one else.