DatePicker & Calendar : Calendrier Javascript basé sur prototype et script.aculo.us
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 prototype et doit être déclarée de la façon 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;
}
Téléchargement
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.




7 commentaires : Participer à la discussion !
Par Sun Location Le 27/12/2009 à 15:46
Merci pour ce date picker qui semble être bien léger :)
Par Un visiteur Le 06/06/2010 à 03:15
Merci pour ce datePicker !
Dommage que vous n'avez pas expliquez d'avantage son utilisation...
Comment fontionne t-il ? Quel Fontion faut-il appelé ? Comment le relier à une div ?
Par Ptit_francky Le 26/07/2010 à 19:55
Merci pour ce datePicker!
Depuis le temps que je cherche à mettre des dates en évidences avec une fonction spécial associée... C'est juste ce qu'il me fallait! Merci beaucoup!
Par Visiteur Le 10/10/2011 à 20:05
Bonjour serait-il possible de détailler la procédure pour installer ce script étant donné que le lien pour le site Eulerian est erroné ?
Merci
Par Serge [UoLad] Le 07/11/2011 à 19:29
Bonjour,
Il ne semble pas fonctionner sur un "target" ASP:TextBox.
Une mauvaise utilisation de ma par peut être ?
Par atlza Le 08/11/2011 à 10:57
Bonjour,Désolé je ne maintiens plus ce widget, n'utilisant plus script.aculo.us. Charge à celui qui souhaite l'utiliser de le faire fonctionner et éventuellement de le redistribuer. Quand au lien Eularian, il n'est pas erroné, mais de la même façon Eularian ne maintient plus non plus son code.
Par Claire83 Le 05/03/2012 à 16:53
Salut,
Je sais que le script n'est plus maintenu, mais serait-il possible uniquement d'indiquer quelle fontion il faut appeler ? Comment le relier à une div ?
Suivez les commentaires du site via RSS.