Section: Datepickers
| « HTML editor | ^ Creating a jforms file | Wiki editor » |
− Table of content
If you want to have a datepicker in your form, you should use the <date> element (or <datetime> for date + time).
<date ref="birthday">
<label>Birthday</label>
</date>
You can change the configuration of datapickers, and change the datepicker for an other one with the attribute datepicker.
General configuration of datepickers ¶
In the section forms of the configuration file of jelix, you can configure the default datepicker used by jelix:
[forms]
controls.datetime.input = "menulists"
controls.datetime.months.labels = "names"
controls.datetime.input indicates the type of input: "textboxes" if you want textboxes, or "menulists" for menulist. In both cases, an additionnal button while be displayed and will allow you to choose the date with a calendar.
controls.datetime.months.labels indicates if menulists should display numbers, names or shortnames for monthes (respectively "numbers", "names", "shortnames").
Using an other type of datepicker ¶
By default, jForms uses the datepicker of jQuery. But you can use an other datepicker, or configure the default one in an other manner.
Each type of datepicker should be declared in the datepickers section.
[datepickers]
type1 = file1.js
type2 = file2.js
type3 = file3.js
...
type1, type2, type3 are names of type of datepicker (you can choose the names), and the corresponding values are the path of a javascript file (path related to basePath.
The default type should be indicated in the datepicker option in the section forms. Here is the default configuration:
[forms]
...
datepicker = default
[datepickers]
default = jelix/js/jforms/datepickers/default/init.js
In a form, to indicate a specific type of datepicker, use the datepicker attribute on the element <date>.
Creating a type of datepicker ¶
To create a new type of datepicker (or a new datepicker configuration), you have to create a javascript file which contains a function. The goal of this function is to initialise the datepicker.
Its name should be jelix_datepicker_xxx where xxx is the type name. The function should accept this arguments:
- a javascript object (
jFormsJQControlDateorjFormsJQControlDatetimewith the default jforms builder) which contains some properties like the name of the field (name), the maximum date (maxDate) or the minimum date (minDate). - a javascript object containing this configuration parameters
locale: the language code (valueof jApp::config()->locale)basePath: the value of basePathjqueryPath: The URL path to the jquery libraryjelixWWWPath: The URL path to the jelix-www content.
The function is called for each datepicker of the form, and should initialize (or create) a datepicker on the different fields needed for the date. jForms generate three fields for a datepicker (day, month, hour). Their names began by the name of form plus the name of the control. Example, for a form "sample.form.xml" in a module "testapp" of the application, and which contains a control <date> named "birthday", you then will have some html field: "jforms_testapp_sample_birthday_month", "jforms_testapp_sample_birthday_day", and "jforms_testapp_sample_birthday_year".
