DatePickerControl v0.9

Transform your input text control into a date-picker control.

(Versión en español)

Features

Use

At the head section of your page, add two following lines:

<script type="text/javascript" src="datepickercontrol.js"></script>
<link type="text/css" rel="stylesheet" href="datepickercontrol.css">

After that, you only need to add one attribute to your input text code (two if you don't have the id attribute... well, three if you want a format date :P), as following example:

<input type "text" name="edit1" id="edit1" datepicker="true">

And that's all :) ...

Optionally, you can use the datepicker_format="XXXXXXX" attribute. This will change the format of the date. Available formats are: DD/MM/YYYY, DD-MM-YYYY, MM-DD-YYY, MM/DD/YYYY, YYYY-MM-DD, YYYY/MM/DD.

Example

A simple edit:

Input without datepicker attribute:

Thin border with DD-MM-YYYY format:    Flat style with YYYY/MM/DD format:


Now, press down arrow key (when the input is focused, of course) to show the calendar and escape key to hide, or use the calendar icon. When the calendar is displayed, use arrow keys to move the selected day, RePg and AvPg keys to change the current month, and Space key to accept the selected date (don't use Intro key because there's a problem with forms with submit buttons [I'm fixing that bug]).

Notes

Bugs

Download

Here's a tgz file with complete code, examples and css files.

Author

By Hugo Ortega-Hernández - hugorteg{drop-this-text}@gmail.com