Présentation

DatePicker & Calendar est une modification du widget OpenSource DatePicker du site eulerian.com.
Il s'appuie sur prototype et script.aculo.us, la version d'origine est un DatePicker qui permet d'afficher, lors d'un clic sur un input de formulaire, un calendrier et d'y sélectionner une date.

J'y ai apporté les fonctionnalités suivantes :
- possibilité de relier le DatePicker à une div pour positionner celui-ci et l'afficher comme calendrier
- appel d'une fonction particulière lors du clic sur une date (celle-ci est passée en paramètre à la fonction appelée)
- possibilité de passer en paramètre au calendrier une liste de date à mettre en évidence.
- possibilité de n'autoriser le clic que sur les dates données en paramètres.

Tous ces paramètres sont optionnels, le calendrier retrouvant par défaut son utilisation de DatePicker.

Le widget modifié est utilisé sur atlza.com dans la partie réactions comme calendrier et dans l'administration de FreesK comme DatePicker.

Utilisation

Configuration du DatePicker & Calendar

Voici la liste des paramètres supplémentaires, tous optionnels qui viennent s'ajouter à la configuration du DatePicker :

- typeshow : valeurs : "fixed" ou "linked", "linked" par défaut (comportement DatePicker), si à "fixed" le widget devra être lié à une div pour permettre une utilisation sous forme de calendrier.
- relativeDiv : valeur : chaine, attend le nom de la div ou apparaitra le calendrier.
- selectDateCallback : chaine, attend le nom de la fonction a appeler lors du clic sur une date du calendrier.
- listImpDate : tableau, attend dans un tableau la liste des dates à mettre en évidence, au format : "dd-mm-yyyy"
- onlyImpDateClick : valeur "true" ou "false", "false" par défaut, si le paramètre est à "true" on ne peut cliquer que sur les dates passées via "listImpDate".

Propriété CSS supplémentaires

- ImpDate : style css d'un jour mis en évidence.

Surcharge de prototype

Le widget utilise dorénavant, une fonction équivalente à la fonction in_array de PHP et nommée à l'identique. Celle-ci vient donc en surcharge de protoype et doit être déclarée de la facon suivante :

Array.prototype.in_array = function(search_term) {
var i = this.length;
if (i > 0) {
do {
if (this[i] === search_term) {
return true;
}
} while (i--);
}
return false;
}

Exemples

Retrouvez un exemple d'utilisation des modifications que j'ai apporté dans la partie réactions du site.

Téléchargement

Ca se passe ici

Limitations

En mode "Calendar", le widget doit être relié à un div qui contiendra en sus un "input" de type "hidden".
Le script n'a pour l'instant été testé que sous Firefox.