Click here to Skip to main content
Click here to Skip to main content
Go to top

ASP.NET Calendar Popup without JavaScript

, 27 Jun 2011
Rate this:
Please Sign up or sign in to vote.
How to implement a calendar pop-up without JavaScript

Introduction

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

Implementation

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="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
    <CodeSnippet Format="1.0.0">
        <Header>
            <Title>calPopUp</Title>
            <Shortcut>calPopUp</Shortcut>
            <Description>Calendar PopUp via button</Description>
            <Author>Armando de la Torre</Author>
            <SnippetTypes>
                <SnippetType>Expansion</SnippetType>
            </SnippetTypes>
        </Header>
        <Snippet>
            <Declarations>
        <Literal>
                    <ID>calendar</ID>
                    <ToolTip>calendar control</ToolTip>
                    <Default>cal</Default>
                </Literal>
                <Literal>
                    <ID>button</ID>
                    <ToolTip>Button control</ToolTip>
                    <Default>btnDate</Default>
                </Literal>
        <Literal>
          <ID>text</ID>
          <ToolTip>Text Control</ToolTip>
          <Default>txtDate</Default>
        </Literal>
      </Declarations>
            <Code Language="csharp">
        <![CDATA[
    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;
        }else{
          $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;
    }
$end$]]>
            </Code>
        </Snippet>
    </CodeSnippet>
</CodeSnippets>

License

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

Share

About the Author

Armando de la Torre
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 PinmemberSilvrdragon5-Sep-13 23:18 
GeneralMy vote of 5 PinmemberShiju Nalukandathil3-Dec-12 0:13 
GeneralMy vote of 4 PinmemberJames Dvorak11-Sep-12 16:31 
Easy to implement. Works as advertised. Saved me time.
GeneralReason for my vote of 2 I think it shouldn't be called popup... Pinmemberraju dasa17-Jul-11 0:14 

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

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

| Advertise | Privacy | Mobile
Web02 | 2.8.140921.1 | Last Updated 27 Jun 2011
Article Copyright 2011 by Armando de la Torre
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid