Click here to Skip to main content
Click here to Skip to main content

An easy way to write a "date picker"!

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

Introduction

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.

Logics

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.

Tricks

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.

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

Share

About the Author

Ray_Cheng
Web Developer
United States United States
No Biography provided

Comments and Discussions

 
GeneralPage is refreshing - problem Pinmemberspk89892-Oct-07 1:30 
Generalthis is for complete newbie Pinmemberknightnyc19-Sep-07 9:35 
GeneralRe: this is for complete newbie Pinmemberyan808031-Jul-08 12:08 
GeneralRe: this is for complete newbie Pinmemberknightnyc1-Aug-08 6:53 
GeneralRe: this is for complete newbie PinmemberZeLLe2112-Jan-10 23:58 
Generalextend this datepicker Pinmemberanga26-Apr-07 2:43 
Generalexcellent job Pinmemberkubasa9-Nov-05 0:20 

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 | Terms of Use | Mobile
Web02 | 2.8.141216.1 | Last Updated 30 Oct 2004
Article Copyright 2004 by Ray_Cheng
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid