An easy way to write a "date picker"!

• Download source files - 9.73 Kb

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.

Click on the button.

Choose a date from calendar.

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.