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

31 Responses to "Create popup date picker using ASP.NET calendar control"

  1. RaiulBaztepo

    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
  3. 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!

  4. Ray

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

  5. Kirutheeka

    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.

  6. mollypepperpot

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

  7. Craig

    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.

  8. Craig

    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.

  9. swetha

    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?

  10. swetha

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

  11. Mike

    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

  12. Venkat

    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

  13. Evans Hernández

    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.

  14. Need Calender for download option on take like linking on date for download EOD data for my website:

    StocksDuniya Team

  15. Hari

    I tried this.. But it couldn t even recognise function key word

  16. Sky

    good source, help me so much, thanks

  17. Lamin Jobarteh

    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!

  18. Shibu

    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.

  19. jane

    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

  20. rajnish

    Thanks 4 d code.. its really working fine..

  21. saiyida

    it works nicely!!!
    TQ so much,

  22. Shaahin

    Thank you, so simple, so useful
    I spent so much time until reached here.
    thanx again

  23. Shaahin

    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

  24. Anuja

    Its really useful
    Thnx. :-)

  25. Eric

    That’s great!

    The ASP.net/C# code works perfectly.

    Many thanks,

    Eric

Leave a Reply