Comme promis, voilà la suite sur jQuery et ses plugins.
Dans ce billet, nous allons abordé le fameux plugin « datePicker », plugin permettant de gérer facilement un calendrier JavaScript.
Pour cela, il vous faut :
- le moteur de script jQuery : jQuery 1.3.2 min
- le plugin datePicker : datePicker
- le patch français : datePicker-fr
- le style css : css-datePicker
Cette version de datePicker est modifié afin de faciliter son utilisation. Les paramètres du datePicker sont « francisé ».
La première des choses à faire, c’est de place les include HTML JavaScript dans la balise head, ou mieux, en bas de page (afin d’optimiser le chargement de la page).
<script type="text/javascript" src="ui.datepicker.js" mce_src="ui.datepicker.js"></script>
<script type="text/javascript" src="ui.datepicker-fr.js" mce_src="ui.datepicker-fr.js"></script>
Le css, quant à lui, doit être inclu dans le header HTML :
<link type="text/css" rel="stylesheet" href="ui.datePicker.css" mce_href="ui.datePicker.css" />
Pour ce qui est du code HTML à mettre en place :
<input type="text" name="maDate" id="maDate" class="date_input" value="" />
Le code JavaScript permettant l’initialisation du calendrier datePicker :
jQuery(document).ready(function() {
jQuery.datepicker.setDefaults(jQuery.datepicker.regional['fr']);
jQuery("#maDate").mousedown(function(){
jQuery("#maDate").datepicker('change', {dateFormat: 'dd-mm-yy', firstDay:1 }).attr("readonly","readonly");
});
});
Cette ligne permet d’attendre la fin du chargement de la page pour lancer le code JavaScript suivant :
jQuery(document).ready(function() {});
Cette ligne permet de spécifier le fichier de langue utilisé :
jQuery.datepicker.setDefaults(jQuery.datepicker.regional['fr']);
Cette ligne permet de définir les paramètres du calendrier lorsqu’il y aura un clic dans le champ de saisie :
jQuery("#maDate").mousedown(function(){
jQuery("#maDate").datepicker('change', {dateFormat: 'dd-mm-yy', firstDay:1 }).attr("readonly","readonly");
});
Ici, dans notre cas, le champ de saisie »maDate » devient seulement lisible, et ne peut être modifié manuellement.
La date affiché est au format français, mais peut être modifié dans le paramètrage du datePicker.
Si vous souhaitez ajouter des bornes au datePicker, il suffit, dans les paramètres, d’ajouter ces codes (nombre en jours par rapport à today) :
minDate:'-36500', maxDate:'+36500'
En PHP, lorsque vous récupérer la date français, il vous faut la reconvertir en date US (pour MySQL par exemple), vous pouvez utiliser cette petite fonction :
static function dateFr($sDate, $sType=''){
@date_default_timezone_set('Europe/Paris');
switch($sType){
case "fr2my" : // renvoi une date simple en anglais
$sDateReturn = ereg_replace('^([0-9]{1,2})-([0-9]{1,2})-([0-9]{2,4})$', '\\3-\\2-\\1', $sDate);
break;case "my2fr": // renvoi une date simple en français
if(!empty($sDate)&&$sDate!="0000-00-00")
$sDateReturn = substr($sDate,8,2).'-'.substr($sDate,5,2).'-'.substr($sDate,0,4);
else
$sDateReturn = '';
break;case "my2frTxt" : // renvoi une date simple texte en français
if(!empty($sDate)&&$sDate!='0000-00-00'){
setlocale(LC_TIME, "fr_FR@euro","fr_FR","fr","FR");
$sDateReturn=strftime("%d %B %Y",strtotime($sDate));
}
else
$sDateReturn = '';
break;
case « my2frTxtShort » : // renvoi une date simple texte en français
if(!empty($sDate)&&$sDate!=’0000-00-00′){
setlocale(LC_TIME, « fr_FR@euro », »fr_FR », »fr », »FR »);
$sDateReturn=strftime(« %d %b %Y »,strtotime($sDate));
}
else
$sDateReturn = »;
break;
case « my2frTxtTime » : // renvoi une date et l’heure texte en français (avec le « à »)
if(!empty($sDate)){
setlocale(LC_TIME, « fr_FR@euro », »fr_FR », »fr », »FR »);
$sDateReturn=strftime(« %d %B %Y à %H:%M »,strtotime($sDate));
}
else
$sDateReturn = $sDate;
break;
case « my2frTxtFull » : // renvoi une date et l’heure basique en français (sans le « à »)
if(!empty($sDate)){
setLocale(LC_TIME, « fr_FR@euro », »fr_FR », »fr », »FR »);
$sDateReturn = strftime(« %d %B %Y %H:%M:%S »,strtotime($sDate));
}
else
$sDateReturn = $sDate;
break;
case « frTxt » : // renvoi la date/time actuelle dont les critères sont spécifiés dans $sDate
setLocale(LC_TIME, « fr_FR@euro », »fr_FR », »fr », »FR »);
$sDateReturn = strftime($sDate,time());
break;
case « my2Picker » : // renvoi une date formaté pour le datePicker new Date(2005, 1 – 1, 26)
list($yTmp,$mTmp,$dTmp)=explode(« - »,$sDate);
$dateTmp=mktime(0,0,0,$mTmp,($dTmp+1),$yTmp);
$sDateReturn= »new Date(« .date(‘Y’,$dateTmp). », « .(date(‘n’,$dateTmp)-1). », « .date(‘d’,$dateTmp). ») »;
break;
default: // n’effectué aucune opération sur la date
if($sDate==’0000-00-00′){
$sDateReturn = »;
}
else{
$sDateReturn = $sDate;
}
break;
}// end swicth
return $sDateReturn;
}//end function dateFr
Il vous suffira d’appeler comme ceci :
dateFr($_REQUEST['maDate'], 'fr2my');
En espérant avoir apporté un peu d’aide …. vous pouvez toujours laisser vos commentaires, réflexion, et correction !
33 commentaires
[...] Datepicker jQuery en français [...]
Déjà merci pour ce tuto
Apres, je n’arrive pas a comprendre la partie concernant la conversion de date.
Cette fonction sert a afficher en format FR dans le champs de saisi apres avoir selectionné la date, ou bien, elle permet de modifier le format de la date pour l’insertion SQL ? car si c’est le cas, pourquoi cette date ne fait que de de traitenement vers une date FR et non vers une date AN ?
Apres, j’aimerais un exemple concret quand a sont exploitation. Dans mon cas, ca serais de pouvoir injecter la date, dans ma base sql, pour garder le bon type de champs
Merci
Cette méthode possède deux case :
- le my2fr qui permet simplement de convertir un format MYSQL vers un format FR
- le fr2my qui permet de convertir une date au format français (saisie dans datepicker par exemple) en format MYSQL (insertion MYSQL).
Cette méthode est juste là pour convertir et peut être appelé soit pour l’affichage, soit pour l’insertion.
Lorsque tu veux afficher une date au format FR, tu fait un appel du genre :
echo datefr(’2009-02-05′,’my2fr’);
et lors de ton insertion :
mysql_query( ‘INSERT INTO t_table VALUES( « », « ‘.dateFr(’02-05-2009′, ‘fr2my’).’ » )’ );
Maintenant, je te conseil de développer en objet (cf. mes billets sur la POO) et de développer une classe static de format ( format::dateFr() ).
Voilà, et encore merci de suivre mes conseils.
Certe, la Programation orienté object a l’air bien puissant, mais pour le moment je me bats entre les fonctions PHP, le java et son pote l’ajax, deja beaucoup de nouvelles choses pour moi ^^
Merci d’avoir pris le temps de m’expliqué votre fonction plus en detail, que je cerne d’avantage.
J’ai créé un fichier date.php ou j’ai placer votre fonction, puis j’ai fait un include dans mon fichier sql, seulement j’ai l’erreur suivante:
Parse error: syntax error, unexpected T_FUNCTION, expecting T_VARIABLE in W:\var\www\fel\script\date.php on line 2
je precise que ce fichier n’a aucun include de Jquery ou des script JS donné si dessus.
Si je me plante completement et que ta fonction et en faite une fonction JS, pour ma defence, j’ai essayer sans succès ^^
Pourrais tu mettre une parti de ton code qui a des problèmes et l’include pour voir ?
Aussi, tu dis te « battre » avec les fonctions PHP, le Java et l’ajax.
Juste pour information : PHP avec les « fonctions » est maintenant dépassé (PHP 4 n’est plus supporté), mais par contre PHP 5 (POO) est d’actualité.
Je te conseil de te mettre directement à PHP objet afin d’aquérir directement les bonnes pratiques sans devoir passer par une étape liée à une technologie ancienne (PHP4).
Aussi, tu dis te battre avec « java », c’est du java pur ou du javascript ?? (grossse différence, java est un language compilé executable sous forme de logiciel sur le client => windows/linux/mac ou sous forme d’applet dans les pages Internet, il nécessite le plugin SUN; alors que Javascript est un langage executé par le navigateur client dans le HTML permettant d’effectuer des actions et des traitements sur l’arbre DOM HTML. L’arbre DOM HTML est la structure parent/enfant de ton code HTML affiché (html->head/body->div->p etc…; quant à AJAX, qui veux dire Asynchrone Javascript And Xml, très peu de gens l’utilise : beaucoup utilise le protocole XML_HTTPREQUEST qui est natif Javascript est qui permet de lancer des requêtes externe via Javascript, mais très peu parse de XML en retour : trop compliqué et inutile face aux connexions interne haut débit).
Si tu cherche un peu plus d’info sur ces nouvelles technologies, je suis ton homme, suffit de demander ..
En espérant avoir répondu à tes question ….
PS : la fonction que je t’ai donné est bien une fonction PHP, qui doit être « appelé/instancié » à la création de ta requête SQL.
Pour le code qui me pause problème j’y revendrai plus tard, car je ne suis plus dans le « truc ».
Je n’etais pas au courant que le mouvement été maintenant a la POO, mais un ami ma dis: C’est bien beau, mais si tu en as pas besoin, reste sur les fonctions.
et-il forcement necessaire de faire appel a de la POO ?
Concernant mes galères de programmation, c’etais plutot une réalité general, quelque soit le language. Apres, oui je parlais bien de Javascript, l’ajax me sert pour l’instant uniquement via des object Xmlhttprequest pour mes formulaires « dynamique », liste lié, vérification de doublon etc.
Je suis toujours a l’affut de nouvelle info, mais parfois il est difficile de comprendre quelle technique utiliser pour une problèmatique. Alors il faut faire le tri, et la ca deviens comlpliqué ^^. En tous cas je te remerci de cette proposition !!
Pour revenir au sujet, c’est donc une fonction PHP ! Je peu donc la mettre dans un fichier unique, que j’appelle via un Requiere_once(tada.php)
Par contre, étant donnée que la fonction attend les valeur de $sDate, $sType= », il faut faire comment pour les passé au moment de la validation du formulaire, donc venant de $_POST a $sdate ?
salut
j’aurai une question à te poser sur ton code.
j’ai recupéré sur mon serveur les different fichiers js necessaire pour le faire fonctionner + la css.
c tès bizarre, il fonctionne parfaitement quand la fenetre explorer est très petite ( comme dans ton exemple ouvert en popup) par contre si tu l’execute sur une page ouverte en grand et que tu tentes de cliquer sur la zone de input ca marche la première fois, on voit le calendrier puis apres ca ne marche plus, en s’acharnant a cliquer un peu partout sur l’input on arrive en arrive qlq fois a faire réapparaitre le calendrier mais c très dur
tu saurai quel est le problème ?
Salut Sam,
il semblerai, juste avec ce que tu me dis, que « l’écouteur » soit appliqué au movais objet.
Je t’invite à poster ton code html.
Cordialement.
Bonjour,
Depuis un certain je cherche ce calendrier qui est super.
Je voudrais l’inclure dans mon form mais malheureusement rien ne passe.
J’ai certainement fait une bourde mais je ne vois pas laquelle?
Pouvez vous me guider s’il vous plait?
J’ai inséré les 3 fichiers JS dans un dossier « lib »
et le fichier CSS dans un dossier « design »
et l’input dans mon form.
Voilà mes 4 fichiers si vous pouvez me dire ce que vous en pensez ? Merci beaucoup
Bonjour,
Aidez-moi s’il vous plait ?
Le code JavaScript permettant l’initialisation du calendrier datePicker ne fonctionne pas.
Merci vraiment de votre aide
Bonsoir.
J’ai bien vu vos commentaire.
Pour vous aider, il faudrait que vous mettiez le contenu de vos fichiers (tout votre code), soit que vous me donniez un lien pour voir « la chose » afin que je puisse regarder d’où vient le problème.
Dans tous les cas, je pourrais sans aucun problème vous aider, mais il me faut juste un peu plus d’informations ..
Cordialement, Rémy.
Bonjour et merci de pouvoir m’aider.
Je vous donne le code que j’ai mis dans ma page « membre.php » qui initialise le calendrier.
entre les balises HEAD
jQuery(document).ready(function() {
jQuery.datepicker.setDefaults(jQuery.datepicker.regional['fr']);
jQuery(« #maDate »).mousedown(function(){
jQuery(« #maDate »).datepicker(‘change’, {dateFormat: ‘dd-mm-yy’, firstDay:1 }).attr(« readonly », »readonly »);
});
});
ensuite ma ligne de formulaire html
Date de Naissance :
<input type="text" name="maDate" id="maDate" class="date_input" size="25" value="naissance ?> » />
et après j’ai mis les 4 pages qui donne dans l’exemple.
- le moteur de script jQuery : jQuery 1.3.2 min
- le plugin datePicker : datePicker
- le patch français : datePicker-fr
- le style css : css-datePicker
Et dans ma page header
Merci beaucoup
Bonjour,
Je suis toujours dans mes recherches, pouvez-vous m’aider ?
Un grand merci
Bonjour,
Désolé, mais entre le travail et un week end assez chargé, très peu de temps pour l’internet.
Je pense qu’il faut regarder du coté des includes.
Sous Firefox, il existe un plugin nommé Firebug qui permet de visualiser les erreurs Javascript générées par la page en cours, je vous conseil fortement de l’installer afin de vérifier qu’aucune erreur JS n’est générée.
Pour ce qui est code JS et HTML de votr formulaire, je le trouve plutôt bon, mais je rajouterai :
jQuery(document).ready(function() {
jQuery.datepicker.setDefaults(jQuery.datepicker.regional['fr']);
jQuery( « #maDate » ).datepicker({dateFormat: ‘dd-mm-yy’, firstDay:1 }).attr( « readonly », « readonly » );
jQuery( « #maDate » ).mousedown(function(){
jQuery( « #maDate » ).datepicker(‘change’, {dateFormat: ‘dd-mm-yy’, firstDay:1 }).attr( « readonly » , « readonly » );
});
});
Le ligne avant le mousedown va permettre « d’initialiser » le champs en datepicker de façon à le « griser » par défaut.
Le champ est il grisé lorsque vous cliquez dans le champ ?
Si non, c’est que JQUERY ne s’applique par correctement (voir Firebug).
Dans l’attente de votre retour.
Bonjour,
J’ai tellement chercher à faire fonctionner le calendrier que je perds mon « latin »
Pouvez-vous m’aider s’il vous plait ?
Merci beaucoup
$(document).ready(function() {
$.datepicker.setDefaults($.datepicker.regional['fr']);
$(‘#monImage1′).click(function(){
$(« #naissance »).datepicker(‘show’);
});
$(« #naissance »).datepicker({minDate:’-36500′, maxDate:’+36500′, dateFormat: ‘dd MM yy’, firstDay:1 }).attr(« readonly », »readonly »);
$(‘#monImage1′).mousedown(function(){
$(« #naissance »).datepicker({minDate:’-36500′, maxDate:’+36500′, dateFormat: ‘dd MM yy’, firstDay:1 }).attr(« readonly », »readonly »);
});
});
<input id="naissance" class="date_input" name="user_naissance" size="25" value="naissance ?> » type= »text » disabled= »"/>
Bonjour.
Je viens de regarder votre code. Vous vous compliquez un peu :
Lorsque vous faites une initialisation du datepicker, une seule ligne suffit :
$(« .date-pick »).datepicker();
Les click et mousedown sont utiles seulement si vous souhaitez faire des phases de vérifications ou si vous avez des contraintes sur d’autres champs (dépendance de limite entre un champ de début et un champ de fin).
Regardez ce petit rar :
datepicker_image.rar
Il y a dedans tous ce qu’il faut pour que le « click » se fasse sur une image est non sur le champ.
$(function()
{
$(« .date-pick »).datepicker({ minDate:’-36500′, maxDate:’+36500′, dateFormat: ‘dd MM yy’, firstDay:1 ,
showOn: ‘button’, buttonImageOnly: true, buttonImage: ‘calendar.png’ }).attr(« readonly », »readonly »);
});
Voilà, si vous avez besoin, vous pouvez toujours revenir vers moi.
Bonjour et merci beaucoup.
Au niveau de l’input pouvez-vous me dire ce que vous en pensez.
Ca ne fonctionne toujours pas.
Merci vraiment de votre aide.
Date de Naissance :
<input id="naissance" class="date_input" name="user_naissance" size="25" value="naissance ?> » type= »text » disabled= »"/>
Salut et merci pour ton article très intéressant!
J’ai remarqué que les cases du week end de ton calendrier sont grisées. Comment fais tu pour différencier ces jours par rapport aux autres de la semaine. Pour ma pars j’aimerai qu’ils deviennent impossible a sélectionner!
Peux tu me guider stp
Je te remercie!
Bonne journée
bonjour,
j’ai un problème je manipule 2 dates picker(date debut et date fin)
je voudrais avoir le nombre de jours entre ces deux dates pourriez vous m’aider svp?
Bonjour Pady,
La réponse est assez simple :
// datepicker(« getDate ») => récupère un objet de type new Date() à partir de l’objet datepicker
var dateDebut = $(« #idDateDebut »).datepicker(« getDate »);
var dateFin = $(« #idDateFin »).datepicker(« getDate »);
// calcule de la différence
var dif = dateFin.getTime()-dateDebut.getTime();
// la fonction getTime sur mes objets date me permet de récupérer le nombre milliseconde de ma date depuis le 1 janvier 1970 [http://actuel.fr.selfhtml.org/archives/docu/7.0/tece.htm#a8]
dif = dif/1000/(60*60*24); // on divise par 1000 pour passer en seconde, puis par (60*60*24) pour passer en jour !!
alert( dif );
Et tu possède alors ton nombre de jour.
Attention, il te faudra vérifier que tes champs DatePicker ai bien été initialiser, et qu’il ne sont pas vide.
En espérant t’avoir un peu aidé …
Bonjour,
Une petite question si cela vous est déjà arrivé.
En local le calendrier marche nickel mais pas sur mon serveur distant ?
Pouvez-vous m’aider s’il vous plait
Merci beaucoup
je vous donne mes codes
[code]
$(document).ready(function() {
$.datepicker.setDefaults($.datepicker.regional['fr']);
$('#monImage1').click(function(){
$("#naissance").datepicker('show');
});
$("#naissance").datepicker({minDate:'-36500', maxDate:'+36500', dateFormat: 'dd MM yy', firstDay:1 }).attr("readonly","readonly");
$('#monImage1').mousedown(function(){
$("#naissance").datepicker({minDate:'-36500', maxDate:'+36500', dateFormat: 'dd MM yy', firstDay:1 }).attr("readonly","readonly");
});
});
[/code]
et mes 4 includes
et mes 4 includes
Auriez vous une adresse pour votre serveur distant ?
Je pense pour un problème de javascript (bloqué sur Internet), mais je pourrai voir le problème que sur l’url de votre adresse distante.
Cdt, Rémy SOLNAIS.
Merci Merci Merci pour ce tuto Rémy
C’est rés pro!!
@+
Bonjour
Merci pour votre réponse, désolé de ce retard pour vous remercier.
Votre calendrier est vraiment super maintenant il fonctionne à merveille.
Aujourd’hui je suis à la recherche d’un calendrier du même style mais qui affiche uniquement les heures et les minutes dans un input.
Alors je me permet de vous demander si par hazard vous avez des infos la-dessus?
Je vous remercie beaucoup
Je vous envoi vers :
http://www.lafermeduweb.net/billet/un-time-picker-pour-le-datepicker-de-jquery-520.html
http://haineault.com/media/jquery/ui-timepickr/page/#d-demo-wrapper-2
http://www.google.fr/#hl=fr&source=hp&q=timepicker+jquery&aq=0&aqi=g9g-s1&aql=&oq=timepi&gs_rfai=&fp=5d7829ea17882594
Et hop, à vous de jouer
Salut, j’aimerai savoir comment modifier le code javascript pour changer la date par défaut présélectionnée qui est actuellement la date du jour. Je m’explique, j’ai un paramètre d’année et de mois dans ma page web, et je voudrais, en fonction du mois et de l’année sélectionné par l’utilisateur, que le calendrier ce positionne au début de ce mois et de cette année sélectionné pour pas que l’utilisateur est à choisir à chaque fois le bon mois. Mais le problème c’est que le javascript je ne le connais pas assez et j’ai cherché et je ne n’ai pas trouvé. Je sais que cela peut paraître un peu bizarre mais le but de ma page web est de permettre aux utilisateurs de choisir les dates pour lesquelles ils veulent effectuer des traitements. Merci d’avance Rémy.
J’allais enfin comprendre comment installer et franciser ce jquery qui me plaisait beaucoup.
Rien à faire ! … je ne voudrais pourtant pas abandonner !
Qu’est-ce qui ne va pas là, SVP ?
Le truc que je pige pas
jQuery(document).ready(function() {
jQuery.datepicker.setDefaults(jQuery.datepicker.regional['fr']);
jQuery(« #maDate »).mousedown(function(){
jQuery(« #maDate »).datepicker(‘change’, {dateFormat: ‘dd-mm-yy’, firstDay:1 }).attr(« readonly », »readonly »);
});
});
Bon, c’est pas passé. Tant pis. Désolé.
Bonjour,
J’ai utilisé les 2 versions de ce datepicker, mais j’ai un petit problème: comment sélectionner une date avant l’an 2000, j’ai essayé de modifié les +(-)365000 mais sans résultats…
Un peu d’aide svp…
Bonjour BERTHOU,
Désolé de la réponse tardive, mais juste rapidement : tu peux passer un objet date à la place
var maDate = new Date(1985,01,01); // annee,mois,jour
min:maDate
Voilà, et si il y a besoin, n’hésite pas à revenir !
Flux RSS des commentaires de cet article. TrackBack URL
Laisser un commentaire