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

POSTED BY Divergence Hosting on Mar 11 under ASP.NET, C#, VB.NET

Leave a Comment

If you would like to make a comment, please fill out the form below.

Name (required)

Email (required)

Website

Comments

18 Comments so far
  1. RaiulBaztepo March 31, 2009 12:25 am

    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

  2. supriya March 31, 2009 3:16 am

    its not working

  3. Divergence Hosting March 31, 2009 3:19 am

    Hi supriya,

    Can you explain further what is not working and I can try to help. Thanks!

  4. PiterKokoniz April 8, 2009 8:46 am

    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

  5. Divergence Hosting April 9, 2009 12:47 pm

    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!

  6. Ray April 21, 2009 4:07 am

    Thank you, i follow your instruction, it works nicely!

  7. Kirutheeka May 6, 2009 12:28 am

    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

  8. Divergence Hosting May 8, 2009 3:55 am

    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.

  9. mollypepperpot May 24, 2009 4:06 am

    Hi I’m learning asp.net and was struggling using the calendar control in .net - this seems to be the best option. thannks :)

  10. Craig June 19, 2009 3:52 am

    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.

  11. Divergence Hosting June 19, 2009 4:21 am

    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.

  12. Craig June 19, 2009 5:10 am

    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.

  13. swetha July 23, 2009 11:16 am

    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?

  14. Divergence Hosting July 23, 2009 11:33 am

    Hi swetha,

    Just make sure you are doing the ToString(”d”) with the field as that should strip the time away.

  15. swetha July 23, 2009 11:53 am

    Thank you so much. It worked. Your sample code didn’t had tostring(”d”) but it worked fine. Is it depending on something else?

  16. Mike September 18, 2009 5:10 am

    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

  17. Venkat November 19, 2009 1:46 pm

    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

  18. Evans Hernández December 2, 2009 10:01 pm

    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.

Copyright Divergence Hosting Technical Blog | Powered by WordPress | Using the GreenTech Theme

SEO Powered by Platinum SEO from Techblissonline