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
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.
sory, where that code must be placed?
i write that code in the window.onload, it doesn’t work. Thank’s before
Need Calender for download option on take like linking on date for download EOD data for my website:
StocksDuniya Team
I tried this.. But it couldn t even recognise function key word
good source, help me so much, thanks
This is by far the best and clearly defined way to make a popup calendar control. I have been searching for one, but was not able to fine anything quite clear as this one.
Best job bud!
I have a master page and content page. When i tried to create the popup calendar i got an error Object required. Text box for the pop up in the content page.
Any help will be appreciated.
This was very helpful. I got it to work using your sample code. But I do have a question – when I click on the arrow to the next month, the calendar disappears. However, when I redisplay it, I do see the next month. Is that the way it’s supposed to work or do I have something wrong?
Thanks!
Jane
Thanks 4 d code.. its really working fine..
it works nicely!!!
TQ so much,
Thank you, so simple, so useful
I spent so much time until reached here.
thanx again
I put this code in code_behinde for checking if page is reloading and still txtDate is empty, so it sets display property of div style on block until you choose a date, otherwise sets on none
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
if (txtDate.Text == “”)
dateField.Style["display"] = “block”;
else
dateField.Style["display"] = “none”;
}
}
hope it helps for keeping div visible for choosing month.
It works on my application
Its really useful
Thnx.
That’s great!
The ASP.net/C# code works perfectly.
Many thanks,
Eric