Click here to Skip to main content
15,901,897 members
Articles / Web Development / CSS

ASP.NET Calendar Popup without JavaScript

Rate me:
Please Sign up or sign in to vote.
4.53/5 (11 votes)
27 Jun 2011CPOL1 min read 52K   5   4
How to implement a calendar pop-up without JavaScript


A common task is to have a calendar control pop-up when the user picks a button / image button. There are plenty of third party solutions which can achieve this. This post describes how to achive this the quick and dirty way:

  • Repetitive code
  • No JavaScript
  • No user controls


To implement the calendar pop-up, we need three controls:

  • A text box
  • A button / image button
  • A calendar control

Create a table or div and place the three controls inside a table cell or the div. Make sure to set the visible attribute in the calendar control to false in the designer or in the page_load event.

Then create the event handler for the button:

protected void btnDate_Click1(object sender, EventArgs e) {
  DateTime date = new DateTime();
  //Flip the visibility attribute
  this.cal1.Visible = !(this.cal1.Visible);
  //If the calendar is visible try assigning the date from the textbox
  if (this.cal1.Visible) {
    //If the Conversion was successfull assign the textbox's date
    if (DateTime.TryParse(txtDate.Text,out date)){
      cal1.SelectedDate = date;
    this.cal1.Attributes.Add("style","POSITION: absolute");

The above code is really straightforward. The button is used to show or hide the calendar control. Also, if the date from the textbox is a valid date, it will be passed to the calendar control. The nice part comes at the end by setting the "POSITION: absolute" CSS attribute we achieve the floating effect of the calendar, instead of having the control push down all the controls below it.

Finally we must handle the SelectionChanged event in the calendar control to set the date value in the textbox. This is done by converting the date into a string and extracting the first 10 characters. Also, we must hide the calendar once the date has been picked.

protected void cal1_SelectionChanged(object sender, EventArgs e) {
  txtDate.Text = this.cal1.SelectedDate.ToString().Substring(0,10);
  this.cal1.Visible = false;

The following snippet can be used to generate the above code quickly it is only necesary to enter the name of the textbox, button and calendar controls, and of course, bind it to the appropiate events.

<?xml version="1.0" encoding="utf-8" ?>
<CodeSnippets  xmlns="">
    <CodeSnippet Format="1.0.0">
            <Description>Calendar PopUp via button</Description>
            <Author>Armando de la Torre</Author>
                    <ToolTip>calendar control</ToolTip>
                    <ToolTip>Button control</ToolTip>
          <ToolTip>Text Control</ToolTip>
            <Code Language="csharp">
    protected void $button$_Click(object sender, EventArgs e) {
      DateTime date = new DateTime();
      this.$calendar$.Visible = !(this.$calendar$.Visible);
      if (this.$calendar$.Visible) {
        if (DateTime.TryParse($text$.Text,out date)){
          $calendar$.SelectedDate = date;
          $calendar$.SelectedDate = DateTime.Today;
        this.$calendar$.Attributes.Add("style","POSITION: absolute");

    protected void $calendar$_SelectionChanged(object sender, EventArgs e) {
      $text$.Text = this.$calendar$.SelectedDate.ToString().Substring(0,10);
      this.$calendar$.Visible = false;


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By
Software Developer (Senior) Self-employed
Mexico Mexico
Senior SAP Consultant ( ABAP / MM / Workflow ).
Delphi Developer
C# Asp Developer

Comments and Discussions

GeneralMy vote of 5 Pin
Silvrdragon5-Sep-13 23:18
Silvrdragon5-Sep-13 23:18 
GeneralMy vote of 5 Pin
Shiju Nalukandathil3-Dec-12 0:13
Shiju Nalukandathil3-Dec-12 0:13 
GeneralMy vote of 4 Pin
James Dvorak11-Sep-12 16:31
James Dvorak11-Sep-12 16:31 
GeneralReason for my vote of 2 I think it shouldn't be called popup... Pin
raju dasa17-Jul-11 0:14
raju dasa17-Jul-11 0:14 
Reason for my vote of 2
I think it shouldn't be called popup, since its doing a postback(sync).

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.