Click here to Skip to main content
14,365,441 members

An easy way to write a "date picker"!

Rate this:
2.65 (26 votes)
Please Sign up or sign in to vote.
2.65 (26 votes)
29 Oct 2004
A date picker implemented with a Calendar control and stylesheets.


Ever wanted to write your own cool date picker? There are tons of them out there, but many of them are hard to implement into your existing code. This one is different because it contains only five lines of code (not including the CSS code)!

How does it work?

In this sample, it contains a Button, TextBox, Panel, and of course, a Calendar web control. At start, there is a textbox and a button. Click on the button to bring up the calendar. Click on the calendar to pick a date and the calendar disappears. Then the date you picked appears in the textbox.

Sample screenshot

Click on the button.

Sample screenshot

Choose a date from calendar.

Sample screenshot

The date chosen appears in textbox.


I use a Panel web control to hold the Calendar web control. I also have defined two CSS styles for the Panel. One to show the Panel, and the other one to hide the Panel. Clicking on the button will assign hide and show CSS styles to the Panel. That's how the calendar appears and disappears.


The trick, or I should say "the key" for this date picker to work is the Panel web control. At the first attempt, I didn't use a Panel and assigned the CSS styles to the Calendar web control. Then, the problem is the weekday names won't appear. Then I changed the CSS show style's position from absolute to relative. It then brings up the weekday names, but it also pushes the textbox down. Then, I tried to use a PlaceHolder web control or even some other web controls, but the Panel web control works the best.

How to use it?

You can't really use my code, but you can look at my code and create your own date picker or calendar. I prefer developing applications by using original components rather than writing a completely new class or monster to do some little stuff.

Just download the source code and unzip it to your wwwroot folder and compile, then Run. You may need to configure a Web Application name at IIS for this to work.


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

Web Developer
United States United States
No Biography provided

Comments and Discussions

GeneralPage is refreshing - problem Pin
spk89892-Oct-07 1:30
memberspk89892-Oct-07 1:30 
Generalthis is for complete newbie Pin
knightnyc19-Sep-07 9:35
memberknightnyc19-Sep-07 9:35 
GeneralRe: this is for complete newbie Pin
yan808031-Jul-08 12:08
memberyan808031-Jul-08 12:08 
GeneralRe: this is for complete newbie Pin
knightnyc1-Aug-08 6:53
memberknightnyc1-Aug-08 6:53 
GeneralRe: this is for complete newbie Pin
ZeLLe2112-Jan-10 23:58
memberZeLLe2112-Jan-10 23:58 
Generalextend this datepicker Pin
anga26-Apr-07 2:43
memberanga26-Apr-07 2:43 
Generalexcellent job Pin
kubasa9-Nov-05 0:20
memberkubasa9-Nov-05 0:20 

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.

Posted 29 Oct 2004


29 bookmarked