Transform your input text control into a date-picker control. -->
(Versión en español) [No actualizada]
input tag,
or using a special id attribute.
In the head section of your page, add the following two lines:
<script type="text/javascript" src="datepickercontrol.js"></script>
<link type="text/css" rel="stylesheet" href="datepickercontrol.css">
Now, if you want to override default parameters, such as month and day names, tooltips, and
others words that are in spanish by default, you need to add some inputs of type hidden in your document (but not in a
form tag to avoid the submit of these controls), as in the following examples:
<input type="hidden" id="DPC_TODAY_TEXT" value="today">
<input type="hidden" id="DPC_BUTTON_TITLE" value="Open calendar...">
<input type="hidden" id="DPC_MONTH_NAMES" value="['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']">
<input type="hidden" id="DPC_DAY_NAMES" value="['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']">
See at the end of this page to find other language definitions. Optionally, you can set other parameters described below.
Now, you have two options if is important for you to be compliant with XHTML:
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 in the following example:
<input type "text" name="edit1" id="edit1"
datepicker="true">
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-YYYY, MM/DD/YYYY, YYYY-MM-DD, YYYY/MM/DD, DD.MM.YYYY, DD.MM.YY.
Default format is DD/MM/YYYY. An example:
<input type="text" name="edit1" id="edit1"
datepicker="true" datepicker_format="MM-DD-YYYY">
You need to use an id attribute with following characteristics:
A prefix DPC_ followed by any name, and if you want a date format, add
a sufix _[FORMAT], where [FORMAT] can be any of the options described
previously. For example:
<input type "text" name="edit1" id="DPC_edit1">
<input type "text" name="edit1" id="DPC_edit1_YYYY/MM/DD">
The first option will use the default date format, and the second one will use the
YYYY/MM/DD format. Note that the DPC_ prefix is mandatory,
unless you specify a date format in the id.
Now, you have some keys to play with the control:
The following parameters can be defined as hidden inputs with this format:
<input type="hidden" id="PARAM_NAME" value="PARAM_VALUE">
| PARAM_NAME | PARAM_VALUE description | Example | Default |
|---|---|---|---|
DPC_DEFAULT_FORMAT |
Overrides default date format for all controls without a specified format (if you don't want to specify a format for each control, as explained in previous sections). |
value="MM/DD/YYYY" |
DD/MM/YYYY |
DPC_SUBMIT_FORMAT |
Specifies the submit format for all datepicker controls, i.e. all datepickers with a value will be transformed to this format. This is very useful when you are using a GUI with a format but your database is expected another format. You can see an example here |
value="YYYY/MM/DD" |
None |
DPC_FIRST_WEEK_DAY |
Defines the first day of the week in the calendar. You can use a numeric value in the range 0..6, where 0=Sunday, 1=Monday, 2=Tuesday, ..., 6=Saturday. You can see an example with Monday as first day here. |
value="1" |
0 |
DPC_WEEKEND_DAYS |
Defines the days treated as weekend. You need to define an array in which 0=Sunday, 1=Monday, ..., 6=Saturday. A dreaming example with 3 days weekend is here. |
|
[0,6] |
DPC_AUTO_SHOW |
Speficied whether or not to automatically display the calendar layer. You can see an auto-show example here. |
value="true" |
false |
DPC_BUTTON_POSITION |
Deprecated To specify if the calendar icon appears |
value="out" |
in |
DPC_CALENDAR_OFFSET_X and DPC_CALENDAR_OFFSET_Y |
Modifies the calendar position in relation to the input's position. Could be useful in some browsers as IE which has strange behaviour depending of page's style, XHTML, etc. Here is an example. |
|
|
DPC_BUTTON_OFFSET_X and DPC_BUTTON_OFFSET_Y |
Deprecated The same of |
|
|
DPC_WEEK_NUMBER |
Specify if week number is showed on the left side of the calendar. An example with week number is here. |
|
|
If you need an onChange event replacement for a date-picker,
use the pseudo-event onSelect, as in the following example:
<script language="JavaScript">
DatePickerControl.onSelect = function(inputid)
{
input = document.getElementById(inputid);
alert("Date captured: " + input.value);
}
</script>
You can see a live example here.
Well, one of the most requested features, date range, is ready!. You can specify it by
using two new attributes in the input tag: datepicker_min and
datepicker_max. For example:
<input type "text" name="edit1" id="edit1"
datepicker="true" datepicker_format="DD/MM/YYYY"
datepicker_min="01/01/2005"
datepicker_max="31/12/2005">
Min and max dates should be specified in the same format of the datepicker (or the default format specified in configuration parameters).
Also is possible to use setMinDate() and setMaxDate()
methods defined for datepicker controls. This is very useful when you want
to change the limits according other events, e.g. the classic date range selection:
the first date is the low limit for the second one.
Some examples using date ranges can be found here.
calendar_icon_big.png file
can help you to generate a new icon with different size.
document.appendChild(), you need to invoke the
DatePickerControl.init() method. Also, if you modify
your page dynamically (for example, adding table rows), use the
DatePickerControl.relocateButtons() method.
This is no longer necessary, because the position of
the icon is now fixed into the element not as a floating div but as a img element into a
nobr tag
Here are some easy-access language definitions:
Version history:
onSelect().DD.MM.YYYY and DD.MM.YY.tr tag) is hidden.Here's a tgz file with complete code, examples and css files (<50kb). Also, you can download de zip version here.
By Hugo Ortega-Hernández - hugorteg{drop-this-text}@gmail.com
You can support free software! Consider that there are non-free similar projects, with less features and higher costs... so, if you donate some money, you can contribute to develop more quality free software.
If I received one Euro or dollar whenever somebody download one of my JS widgets, I would have more time to develop new useful ideas for all of you, and to support other free software projects of course...
You can find other JavaScript controls here.
