Click here to Skip to main content
15,867,686 members
Articles / Web Development / ASP.NET

Date picker and Time picker in ASP.NET 2.0 using AJAX (with Atlas)

Rate me:
Please Sign up or sign in to vote.
4.07/5 (16 votes)
2 Aug 2006CPOL4 min read 204.4K   2.9K   56   20
Add a date picker and a time picker to your web pages.

Introduction

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 screenshot of the final product:

To pick a date:

Image 1

To pick a time:

Image 2

Results:

Image 3

Setup up your Atlas/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 the Atlas PopupControlExtender Control

Here is the easiest way to get the 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 choose "Show All").
  • Drag the PopupControlExtender to your page.
  • You may get a message to replace the Micrsoft.Web.Atlas.dll, say No to it.
  • Go back to your ASPX page, and you will see a new tag there:
  • ASP.NET
    <%@ Register Assembly="AtlasControlToolkit" 
                 Namespace="AtlasControlToolkit" TagPrefix="cc1" %>
  • Your Bin folder 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 the 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 an ASP.NET Calendar control inside the panel. With the help of PopupControlExtender and the UpdatePanel control, we can hook all this up. Let's have a look at the code:

ASP.NET
<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 the sample project to have the complete code).

Ho yes, there is a bit of code too

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

C#
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 the 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 used for our date picker, we can do a time picker as well; only now, I will put a RadioButtonList control instead of a calendar control. Again, our panel will do the job of the pop up; only this time, we need to add a div style to make it look like a pop up. Let's look at the full code:

ASP.NET
<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" O
       nSelectedIndexChanged="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>

Very similar to the date picker. Here are some points to keep in mind:

  • We use a div to have our radio list pop up in a white background (see the bold line in the code above).
  • HTML
    <div style="border:1px outset white" >

    and we close the div just before the Panel tag ends.

  • In the RadioButtonList control, set the OnSelectedIndexChanged="RadioButtonTimeFrom_SelectedIndexChanged" event. There is some code available 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 the OnSelectedIndexChanged event of the RadioButtonList:

C#
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 does async postbacks (you have to wait for the page to finish loading). There may be some latency for longer running processes, and you want to provide users some feedback/progress indicators. Using 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:

ASP.NET
<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 of 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 has 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 can 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.

License

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


Written By
Web Developer TrafficTech
Canada Canada
Have technical skills that can be demonstrated and an ability to resolve complex problems quickly while working in a demanding, high pressure environment

Designs, plans, and coordinates software development work teams

Provides technical mentorship to project team members

Handles complex application features and technical designs for the development of new applications.

Write articles about ASP.net:
http://www.codeproject.com/KB/aspnet/SQLHelper20.aspx http://www.codeproject.com/KB/aspnet/DateAndTimePicker.aspx http://www.codeproject.com/KB/aspnet/SQLHelper20.aspx http://www.codeproject.com/KB/aspnet/WaitImageBoxWhilePagePost.aspx

Designs and implements the components, frameworks and layers required for complex application features

Understands and participate in all aspects of the Software Development Life Cycle

Relies on experience and judgment to plan and accomplish goals.

Ability to perform various programming activities (coding, testing, debugging, documenting, maintaining and supporting).

Ability to work independently with minimal supervision.

10 years’ experience in web software design and development.

SpecialtiesASP.net
SQL 2005
AJAX 1.0
Linq
C# 3.5
Microsoft Application Blocks
Java Script
Reporting Services
SQL SSIS
XML
Classic ASP

Comments and Discussions

 
QuestionThis article is for VS 2005 & ASP.NET v2.0. Do you have a version for VS2010 ASP.NET v4.0? Pin
R Desai21-Jan-15 5:33
R Desai21-Jan-15 5:33 
GeneralUsing AJAX Pin
Adeel6883-Sep-07 1:41
Adeel6883-Sep-07 1:41 
QuestionButton Pin
balford5-Jun-07 9:01
balford5-Jun-07 9:01 
QuestionMaster Pages Pin
ebaradmin5-Feb-07 7:10
ebaradmin5-Feb-07 7:10 
QuestionChange selected date of calendar on change Pin
jfreets27-Dec-06 10:13
jfreets27-Dec-06 10:13 
AnswerRe: Change selected date of calendar on change Pin
rperetz28-Dec-06 8:46
rperetz28-Dec-06 8:46 
QuestionRe: Change selected date of calendar on change Pin
jfreets29-Dec-06 3:23
jfreets29-Dec-06 3:23 
QuestionVery nice. Has anybody been able to get this to work inside a formview ? Pin
jcpineiro8-Nov-06 16:48
jcpineiro8-Nov-06 16:48 
AnswerRe: Very nice. Has anybody been able to get this to work inside a formview ? Pin
keilmanpaul16-Nov-06 20:22
keilmanpaul16-Nov-06 20:22 
GeneralBind TemplateField from Detailsview to PopupControlExtender Pin
olkman6-Oct-06 4:10
olkman6-Oct-06 4:10 
Generalproblem using your code in user control and formview Pin
hameddd7-Sep-06 3:19
hameddd7-Sep-06 3:19 
GeneralProblem with Textbox and PopupControlExtender Pin
SoonerGoose18-Aug-06 8:14
SoonerGoose18-Aug-06 8:14 
GeneralRe: Problem with Textbox and PopupControlExtender Pin
rperetz22-Aug-06 5:53
rperetz22-Aug-06 5:53 
GeneralRe: Problem with Textbox and PopupControlExtender Pin
rperetz22-Aug-06 6:06
rperetz22-Aug-06 6:06 
GeneralThe same as Atlas Control Toolkit Demo Pin
Simone Busoli8-Aug-06 13:26
Simone Busoli8-Aug-06 13:26 
GeneralRe: The same as Atlas Control Toolkit Demo Pin
rperetz11-Aug-06 3:44
rperetz11-Aug-06 3:44 
GeneralAbout that time picker's ListItem list... Pin
Marc Brooks2-Aug-06 11:03
Marc Brooks2-Aug-06 11:03 
GeneralRe: About that time picker's ListItem list... Pin
rperetz2-Aug-06 11:48
rperetz2-Aug-06 11:48 
GeneralRe: About that time picker's ListItem list... Pin
Marc Brooks2-Aug-06 13:29
Marc Brooks2-Aug-06 13:29 
GeneralNice! Pin
mikeperetz2-Aug-06 8:26
mikeperetz2-Aug-06 8:26 

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.