Transform your input text control into a date-picker control.
input
tag.
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
.
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]).
datepickercontrol.js
, and comment/uncomment
the corresponding arrays).
Here's a tgz file with complete code, examples and css files.
By Hugo Ortega-Hernández - hugorteg{drop-this-text}@gmail.com