Raccourcis : Contenu - rubriques - sous rubriques
EN FR
Guide du développeur
Jelix 1.2.13

Section: Datepicker

« Éditeur HTML ^ Format version 1.1 Éditeur wiki »
Changer de langue : EN

− 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 ou jFormsJQControlDatetime 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 $gJConfig->locale)
    • basePath : le basePath de l'application
    • jqueryPath : le chemin URL vers le répertoire de jquery
    • jelixWWWPath : 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".

« Éditeur HTML ^ Format version 1.1 Éditeur wiki »
Changer de langue : EN
Ce manuel est distribué selon les termes de la licence Creative Commons by-nc-sa 3.0. Vous pouvez donc reproduire, modifier, distribuer et communiquer ce manuel au public en respectant les conditions suivantes : Paternité, Pas d'Utilisation Commerciale, Partage des Conditions Initiales à l'Identique.