Section: Datepicker
« Éditeur HTML | ^ Créer un fichier jforms 1.1 | Éditeur wiki » |
− Table des matières
Pour avoir une saisie simplifié de date dans vos formulaires, il faut utiliser
la balise date
(ou datetime
pour saisie une date et une heure). Cela
affiche alors un "datepicker".
<date ref="naissance">
<label>Date de naissance</label>
</date>
Vous pouvez changer la configuration du datepicker, et même changer le
datepicker pour un autre via l'attribute datepicker
.
Configuration générale des datepickers ¶
Dans la section forms
fichier de configuration de Jelix, vous pouvez
paramétrer la façon dont est affiché le date picker :
[forms]
controls.datetime.input = "menulists"
controls.datetime.months.labels = "names"
controls.datetime.input
indique si la saisie se fait avec un champs de
saisie classique (valeur "textboxes") ou avec une liste déroulante (valeur
"menulists"). Dans les deux cas, un bouton vous permettra de choisir la date
dans un calendrier.
controls.datetime.months.labels
indique si la liste des mois affiche les
chiffres ("numbers"), les noms ("names"), ou les noms courts ("shortnames") des
mois.
Utiliser un autre type de datepicker ¶
Par défaut, jForms utilise le datepicker de jQuery. Mais vous pouvez en utiliser
d'autres si vous le souhaitez, ou le même mais configuré différement. Chaque
type de datepicker doit être déclaré dans la section datepickers
.
[datepickers]
type1 = fichier1.js
type2 = fichier2.js
type3 = fichier3.js
...
type1
, type2
, type3
sont les noms des types de datepicker (vous
pouvez choisir les noms que vous voulez), et les valeurs correspondantes doivent
être le chemin d'un fichier javascript à partir du basePath (voir plus loin).
Le type par defaut doit être indiqué dans l'option datepicker
dans la
section forms
. Voici la configuration par défaut :
[forms]
...
datepicker = default
[datepickers]
default = jelix/js/jforms/datepickers/default/init.js
Dans un formulaire, pour indiquer que vous voulez utiliser un type de datepicker
particulier, indiquer son nom dans l'attribut datepicker
sur la balise
<date>
.
Créer un type de datepicker ¶
Pour déclarer un nouveau type de datepicker, vous devez créer un fichier javascript qui contiendra une fonction qui sera chargée d'initialiser le datepicker.
Cette fonction doit avoir pour nom jelix_datepicker_xxx
où xxx est le nom
du type. Cette fonction doit accepter en paramètre :
- un objet javascript (
jFormsJQControlDate
oujFormsJQControlDatetime
avec le builder jforms basé sur jQuery) qui contient des propriétés comme le nom des champs de saisie (name
), la date maximum (maxDate
) ou la date minimum (minDate
). - un objet contenant des options de configuration :
locale
: le code de langue (valeur de jApp::config()->locale)basePath
: le basePath de l'applicationjqueryPath
: le chemin URL vers le répertoire de jqueryjelixWWWPath
: le chemin URL vers le répertoire de jelix-www
Pour chaque datepicker du même type utilisé dans un formulaire, la fonction sera
appelée, et devra initialiser le datepicker sur les champs de saisie de la date.
jForms génère en effet au moins 3 champs, dont les noms ont pour base le nom du
formulaire et le nom du control. Exemple, pour un formulaire "sample.form.xml"
dans le module "testapp" de votre application, et qui contient un controle
<date>
de nom "datenaissance", vous aurez alors des champs html de nom
"jforms_testapp_sample_datenaissance_month",
"jforms_testapp_sample_datenaissance_day", et
"jforms_testapp_sample_datenaissance_year".