CodeProject: Date picker and Time picker in asp.net 2.0 using Ajax (With Atlas). Free source code and programming help

In this article I will show you how to have a date picker and a time picker with almost no code, using Ajax (with Atlas). Having a good date picker can make the end user experience much better and after all your date is a valid date.
Here is a screen shoot of the final product:

To pick a date:
To pick a time:
Results:

Setup up your Atals/AJAX Web Project

Please visit my first article to learn about Atlas and how to set up an Atlas Web Project: http://www.thecodeproject.com/useritems/Autocomplete.asp. (Read Step 1 and Step 2)

Say Hi to Atlas PopupControlExtender Control

Here is the easiest way to get PopupControlExtender Atlas Control in your Page:

Go to Design View

Open your VS2005 Toolbox and look for Atlas group (if you don't see it right click in the toolbox and say "show all")

Drag the PopupControlExtender to your page

You may get a message to replace the Micrsoft.Web.Atlas.dll, say no it

Go back to your aspx html page, and you will see a new tag there

<%@ Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="cc1" %>

Your Bin Dir should have AtlasConrtolToolkit.dll, Microsoft.AtlasControlExtender.dll and Microsoft.web.atlas.dll

Let's Review the main properties of this control:

TargetControlID - The ID of the control to attach to PopupControlID - The ID of the control to display

Position - Optional setting specifying where the popup should be positioned relative to the target control. (Left, Right, Top, Bottom, Center)

CommitProperty - Optional setting specifying the property on the control being extended that should be set with the result of the popup

CommitScript - Optional setting specifying additional script to run after setting the result of the popup

OffsetX/OffsetY - The number of pixels to offset the Popup from its default position, as specified by Position.

Hook up the calendar control with PopupControlExtender

We are going to use a Panel control to be our pop up, and have a asp.net calendar control inside the panel. with the help of PopupControlExtender and UpdatePanel Control we can hook all this up. Let's have a look at the code:

<asp:Panel ID="Panel1" runat="server" CssClass="popupControl">


<atlas:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<atlasToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server"><atlasToolkit:PopupControlProperties TargetControlID="txtUpdateDateFrom" PopupControlID="Panel1" Position="Bottom" />
</atlasToolkit:PopupControlExtender>
      Place your Calendar asp.net control
</ContentTemplate>
</atlas:UpdatePanel>
</asp:Panel>

The code is very easy to follow, if you want to learn more about the UpdatePanel control go to : http://atlas.asp.net/docs/Server/Microsoft.Web.UI/UpdatePanel/default.aspx (download sample project to have complete code)

Ho Yes there is a bit of code too

Let's have a look at the code to handle calendar changes

  
    protected void Calendar1_SelectionChanged(object sender, EventArgs e)
    {
        // Popup result is the selected date

        PopupControlExtender1.Commit(txtUpdateDateFrom, Calendar1.SelectedDate.ToShortDateString());
    }

Here you can change the formatting of the selected date in this example I use Calendar1.SelectedDate.ToShortDateString(). and that's all, you got yourself a date picker

Let's have a time picker too

Using the same idea we did our date picker we can do a time picker as well, only now I will put a RadioButtonList control instead of a colander control. again our panel will do the job of the pop up, only this time we need to a div style to make it look like a pop up, let's have a look at the full code:


<asp:TextBox ID="txtTimeFrom" runat="server" Width="50"></asp:TextBox>
<asp:Panel ID="PanelTime" runat="server" CssClass="popupControl" >
<div style="border:1px outset white" > 
<atlas:UpdatePanel ID="UpdatePanel4" runat="server">
<ContentTemplate>

    <atlasToolkit:PopupControlExtender ID="PopupControlExtender3" runat="server">
        <atlasToolkit:PopupControlProperties TargetControlID="txtTimeFrom"
         PopupControlID="PanelTime" CommitProperty="value" Position="Bottom" />
    </atlasToolkit:PopupControlExtender>
<asp:RadioButtonList ID="RadioButtonTimeFrom" runat="server" OnSelectedIndexChanged="RadioButtonTimeFrom_SelectedIndexChanged" AutoPostBack="true" RepeatColumns="4" RepeatDirection ="Horizontal" >
<asp:ListItem Text="0:00"></asp:ListItem>
<asp:ListItem Text="0:30"></asp:ListItem>
<asp:ListItem Text="1:00"></asp:ListItem>
<asp:ListItem Text="1:30"></asp:ListItem>
<asp:ListItem Text="2:00"></asp:ListItem>
<asp:ListItem Text="2:30"></asp:ListItem>
<asp:ListItem Text="3:00"></asp:ListItem>
<asp:ListItem Text="3:30"></asp:ListItem>
<asp:ListItem Text="4:00"></asp:ListItem>
<asp:ListItem Text="4:30"></asp:ListItem>
<asp:ListItem Text="5:00"></asp:ListItem>
<asp:ListItem Text="5:30"></asp:ListItem>
<asp:ListItem Text="6:00"></asp:ListItem>
<asp:ListItem Text="6:30"></asp:ListItem>
<asp:ListItem Text="7:00"></asp:ListItem>
<asp:ListItem Text="7:30"></asp:ListItem>
<asp:ListItem Text="8:00"></asp:ListItem>
<asp:ListItem Text="8:30"></asp:ListItem>
<asp:ListItem Text="9:00"></asp:ListItem>
<asp:ListItem Text="9:30"></asp:ListItem>
<asp:ListItem Text="10:00"></asp:ListItem>
<asp:ListItem Text="10:30"></asp:ListItem>
<asp:ListItem Text="11:00"></asp:ListItem>
<asp:ListItem Text="11:30"></asp:ListItem>
<asp:ListItem Text="12:00"></asp:ListItem>
<asp:ListItem Text="12:30"></asp:ListItem>
<asp:ListItem Text="13:00"></asp:ListItem>
<asp:ListItem Text="13:30"></asp:ListItem>
<asp:ListItem Text="14:00"></asp:ListItem>
<asp:ListItem Text="14:30"></asp:ListItem>
<asp:ListItem Text="15:00"></asp:ListItem>
<asp:ListItem Text="15:30"></asp:ListItem>
<asp:ListItem Text="16:00"></asp:ListItem>
<asp:ListItem Text="16:30"></asp:ListItem>
<asp:ListItem Text="17:00"></asp:ListItem>
<asp:ListItem Text="17:30"></asp:ListItem>
<asp:ListItem Text="18:00"></asp:ListItem>
<asp:ListItem Text="18:30"></asp:ListItem>
<asp:ListItem Text="19:00"></asp:ListItem>
<asp:ListItem Text="19:30"></asp:ListItem>
<asp:ListItem Text="20:00"></asp:ListItem>
<asp:ListItem Text="20:30"></asp:ListItem>
<asp:ListItem Text="21:00"></asp:ListItem>
<asp:ListItem Text="21:30"></asp:ListItem>
<asp:ListItem Text="22:00"></asp:ListItem>
<asp:ListItem Text="22:30"></asp:ListItem>
<asp:ListItem Text="23:00"></asp:ListItem>
<asp:ListItem Text="23:30"></asp:ListItem>
<asp:ListItem Text="23:59"></asp:ListItem>

</asp:RadioButtonList>
</ContentTemplate>
</atlas:UpdatePanel>
</div>
</asp:Panel>

Ok very similar to the date picker, here are some points to keep in mind:

We use a div to have our radiolist pop up in a white backround (view my bold row in the code above)


<div style="border:1px outset white" >

and we close the div just before the Panel tag ends

In the RadioButtonList Control set OnSelectedIndexChanged="RadioButtonTimeFrom_SelectedIndexChanged" Event there is some code later on

In the RadioButtonList Control set AutoPostBack="true"

In the RadioButtonList Control set RepeatColumns="4" and RepeatDirection ="Horizontal" (list the radios in a table format)

Let's See the code for OnSelectedIndexChanged Event for the RadioButtonList

  protected void RadioButtonTimeFrom_SelectedIndexChanged(object sender, EventArgs e)
    {
        if (!string.IsNullOrEmpty(RadioButtonTimeFrom.SelectedValue))
        {
            // Popup result is the selected task

            PopupControlExtender3.Commit(txtTimeFrom, RadioButtonTimeFrom.SelectedValue);
        }
        else
        {
            // Cancel the popup

            PopupControlExtender3.Cancel(txtTimeFrom);
        }
        // Reset the selected item

        RadioButtonTimeFrom.ClearSelection();
    }

How can I tell my users that my page is busy doing a postback with Atlas?

Ajax is doing async postbacks, (you have to wait for the page to finsh loading), there may be some latency for longer running processes and you want to provide users some feedback/progress indicators. Using the UpdateProgress enables you to implement a progress template to display when controls are "InPostback." you can put this code just after the atlas:ScriptManage control:


<atlas:UpdateProgress id="process1" runat ="server">
<ProgressTemplate>
<div class = "title">
   <img src="images/updating_anim.gif" />Please wait, the page is loading...
</div>
</ProgressTemplate> 

</atlas:UpdateProgress>

Every time the page does a postback, you will see the image and the message: "Please wait, the page is loading...".
Note: I am looking for a way to disable the input controls while the page is posting back, so the user can't change his input while the page is posting. I will update this article once I find a good way.

Here are the steps to run my code

1. download the zip file

2. copy all the folder "TimePicker" to your web site folder (C:\Documents and Settings\[your name]\My Documents\Visual Studio 2005\WebSites)

3. Open VS2005 and Create a new C# web site called "TimePicker" (don't need to select the Atlas template since my site already have all the Atlas dlls) and point the site to the location you saved your folder (C:\Documents and Settings\[your name]\My Documents\Visual Studio 2005\WebSites\AtlasTextBoxAutoComplete)

4. VS2005 will give you a message saying "Web Site already exists", now you select "Open the existing web site" and push ok

5. click on default.aspx (to make it your start up page) and run.

6. Run Default.aspx

Feedback

Feel free to leave any feedback on this article or any questions you may have.

Ronnie Peretz
PHP (People Helping People)

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

rperetz

Member

Location:

Canada

Other popular ASP.NET articles:

Multiple File Upload With Progress Bar Using Flash and ASP.NET
How to use Flash to upload multiple files in a medium-trust hosting environment
CAPTCHA Image
Using CAPTCHA images to prevent automated form submission.
10 ASP.NET Performance and Scalability Secrets
10 easy ways to make ASP.NET and AJAX websites faster, more scalable and support more traffic at lower cost
Exploring Session in ASP.Net
This article describe about session in ASP.Net 2.0 . Different Types of Session , There Configuration . Also describe Session on Web Farm , Load balancer , web garden etc.
Paging of Large Resultsets in ASP.NET
An article about optimization and performance testing of MS SQL Server 2000 stored procedures used for paging of large resultsets in ASP.NET