Control.Calendar
Before proceeding you may want to read our getting started page.
What does this control do?
Displays a calendar which can be used to fill a form's input.
For an usage example check out the Control.Calendar demo.
How to use it
In order to be able to use this control, paste this line of javascript right
at the beginning of your script tag:
An external input tag is required to attach the control: <input type="text" name="name_of_the_input" id="test-input" />
You may then be able to invoke the Calendar
// ELEMENT
// This is the element you want to attach the Calendar to.
// The calendar will be shown when the user clicks the
// specified element.
'test-input',
// OPTIONS
{
'format': '%Y-%m-%d %H:%i',
'minYear': 2005,
'maxYear': 2010,
'showHour': true,
'showMinute': true,
'showMeridiem': true
}
);
The format option is important, it defines the way the date will be shown by using format codes.
The table below containts the currently supported format codes:
| Format Character | Description | Returned Values |
| %d | Day of the month with leading zeros | 01 up to 31 |
| %j | Day of the month without leading zeros | 1 up to 31 |
| %y | Two digit representation of a year | 00 up to 99 |
| %n | Numeric representation of a month, without leading zeros | 1 up to 12 |
| %g | 12-hour format of an hour without leading zeros | 1 up to 12 |
| %k | Minutes without leading zeros | 0 up to 59 |
| %z | Seconds without leading zeros | 0 up to 59 |
| %a | Lower case Ante meridiem and Post meridiem | am/pm |
| %G | 24-hour format of an hour without leading zeros | 0 up to 24 |
| %m | Numeric representation of a month, with leading zeros | 01 up to 12 |
| %H | 24-hour format of an hour with leading zeros | 00 up to 23 |
| %h | 12-hour format of an hour with leading zeros | 0 up to 23 |
| %i | Minutes with leading zeros | 00 up to 59 |
| %s | Seconds with leading zeros | 00 up to 59 |
| %A | Upper case Ante meridiem and Post meridiem | AM/PM |