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:

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:

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:

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:

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

Download the zip file.

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

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).

VS2005 will give you a message saying "Web Site already exists". Now you can select "Open the existing web site" and push OK.

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

Run Default.aspx.

Feedback

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

Comments and Discussions

I am interested in timepicker control. Wondering if you have a relatively newer version. If not, would you mind directing me where can I get it from? Thanks!
My email address is: rdesai3@sbcglobal.net Thanks!

And what about if i want to use a button to display the date control instead of just clicking the textbox? How whould i link the popup control with the textbox. Actually there is a new calendarextender but... this can't be attached to the top of the textbox, just at the bottom. I need a calendar control that can be attached to the top of a textbox but the calendar shouldn't be displayed until the user click on the button.

I cannot get this to work once I put it in a master Page. I am sure it is something simple I am missing. Originally I wanted it inside a detailsView but I ambandoned that as it seemed like it was not possible. Any help on either topic would be greatly appreciated. thank you.
~Larry

If the user manually types in the date text box, is there a way to have the selected date of the calendar change to the value they type?. For example, if I ignore the calendar and simply type a date. Then I click somewhere else on the page to make the calendar go away, then I click on the textbox again to have the calendar reopen. The selected date should then be the same as what I typed. Any help would be greatly appreciated.

This example works great. But I've tried everything and Can't get it to work with formview textboxes. The Panel must be inside each template but then it has problems because it needs to the script manager there, but then when you switch modes it complains that there can only be one script manager per page. Add to that, script manager on a master page.

If anybody knows how please respond to my post on forums.asp.net under user jcnet.

Dealing purely with theory here, as I'm having a similar problem with even getting the page to load in a formview...

...but I normally write just one formview template for edittemplate, then delete the other templates - insert defaults to using the edit template. Then I drop in a nasty hack direct into the page something along the lines of:

Im having problem implementing date picker in a usercontrols formview edititemtemplate textbox.
It's doin weird formatting when popup (all the textboxes which are under the date pick box formatted 2 tabs inline),
and when i click on a date i got popup box: Unknown error.

I changed your event to this, because i can only reach the textboxt object when the formview is in edit mode:

When I put the Textbox and PopupControlExtender in the same UpdatePanel I get the Assertion Failed: Duplicte use of id "_txtUpdateDateFrom" for object of type "AtlasControlToolkit.PopupControlBehavior". Have you heard of this error and/or have found a solution.

I've written a DataSource control that can be bound against any data bound control (including RadioButtonList) so you don't have to hard-code all those ListItem values. This makes it easier to change the range and increment of the times. You can see the results in my blog post Yield to the power of the DataSource.