AFFICHE UN CALENDRIER SOUS UNE ZONE DE SAISIE
nicomilville
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
-
26 avril 2008 à 11:12
rivka95 Messages postés 80 Date d'inscription mardi 15 mars 2011 Statut Membre Dernière intervention 27 mars 2015 - 19 févr. 2013 à 11:47
rivka95 Messages postés 80 Date d'inscription mardi 15 mars 2011 Statut Membre Dernière intervention 27 mars 2015 - 19 févr. 2013 à 11:47
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/46469-affiche-un-calendrier-sous-une-zone-de-saisie
https://codes-sources.commentcamarche.net/source/46469-affiche-un-calendrier-sous-une-zone-de-saisie
19 févr. 2013 à 11:47
19 févr. 2013 à 11:24
Merci ! code qui semble très bien fonctionner.
Comment puis-je gérer les dimensions de la boite ?
Merci
6 juil. 2012 à 06:46
5 juil. 2012 à 22:22
il récupère sur le champ text une date au format 05/07/2012
mais comment faire pour qu'à la fin , il me récupère un format du style 2012-07-05 ???
Merci d'avance pour vos réponses ^^
16 mars 2012 à 14:21
Amrounix, tu dis avoir mis en ligne une nouvelle version, peux-tu donner le lien car je ne trouve pas "ultimate calendar", merci.
16 mars 2012 à 10:21
22 oct. 2008 à 00:59
je vois par vos commentaires que ce script a beaucoup de succès!!!
J'ai tenté de le mettre sur mon site sauf que je n'arrive pas à sélectionner de date...
Si l'un de vous a une idée sur l'origine du problème... Je suis preneuse !! ::))
Merci beaucoup!!
4 juil. 2008 à 12:41
je l'ai appelé "ultimate calendar"
2 juil. 2008 à 15:32
16 mai 2008 à 20:25
puis integrer le .js dans le header de ta page, puis mettre (ajouter) tout simplement sur ton control "input text":
onfocus="view_microcal(strucDate(new Date()),true,true,this.id,'microcal2',-1,0);"
onblur="CalendarHide(this.id,'microcal2');"
//optionnel
onkeyup="this.style.color=testTypeDate(this.value)?'black':'red'"
ce qui donne :
et ou "microcal2" et le nom du layer allant afficher le calandar :
12 mai 2008 à 12:25
j'ai apprécié votre travail, et j'ai quelques questions à vous poser.
tout d'abord, je suis entrain de développer une application dans le cadre du pfe avec java (swing) et oracle 10g.
au niveau des interfaces que j'ai créé j'ai des champs de texte pour des dates( date debut et date de fin),alors:
-est ce que je peu utliser ce code pour le remplissage des champs?
-si oui est ce que vous pouvez m'indiquer comment?"car je n'ai aucune idée à propos de l'intégration des codes différents ainsi que je n'ai aucune idée sur le java script"
encore merci
coordialement
8 mai 2008 à 18:24
7 mai 2008 à 23:54
7 mai 2008 à 20:28
29 avril 2008 à 21:23
- accents manquants pourquoi ?
- un tableau pour mettre le calendrier sous la zone, c'est de la mise en forme à la n'importe quoi
- certaines variables ne sont pas déclarée explicitement
donc je ne mets qu'un 6/10
29 avril 2008 à 09:08
je ne sais pas si tu as vue à la ligne 108, je l'ai mis en commentaire
cela permet d'avoir le numero de la semaine ! (idxweek étant la 1ere semaine de la 1ere ligne affiché) suffit de le rajouter à la génération du tableau
et concernant les '<<' & '>>' il faut dupliquer les ligne 115 et 117 et
-remplacer "dateS.annee" par "(dateS.annee + 1)" et "(dateS.annee - 1)" dans la 2nd ligne
-remplacer "(dateS.mois + 1)" et "(dateS.mois - 1)" par "dateS.mois"
28 avril 2008 à 23:38
a++
28 avril 2008 à 21:51
propre, net, concis !
Par contre je ne te note "que" 8/10 pour garder une petite marge de progression :
Tu peux gagner 1 point de plus en rajoutant le n° de la semaine (cela n'est pas aussi facile que ça en a l'air, mais c'est pas si dur que ça !).
Le 2ème point en rajoutant 2 boutons ("<<" et ">>" pour naviguer par année au sein du calendrier.
28 avril 2008 à 18:25
Cordialement
CEFAR
28 avril 2008 à 16:39
Par contre, sous IE6, l'alerte de blocage de fenêtre, on peut pas le virer pour ce type de code ?
28 avril 2008 à 13:56
-j'ai replacé les id par des document.getElementById(...)
-j'ai fixé la largeur des colonnes
essaye ca :
<html>
<head>
<style>
input {border:1px blue solid;width:80px;}
body {font-family:Tahoma;font-size:12px}
td {font-family:Tahoma;font-size:12px}
</style>
<script language="javascript">
moisX=["","Janvier","Fevrier","Mars","Avril","Mai","Juin","Juillet","Aout","Septembre","Octobre","Novembre","Decembre"];
JourM=["Di","Lu","Ma","Me","Je","Ve","Sa"];
var fermable_microcal=true;
var select_old= null;
var startWeek=0;//debut de la semaine 0=dim,1=lun,...
var jourPause={0:true,6:true}; //jour de pause de la semaine
var jourFeriee={"1-1":"jour an","1-5":"fête du travail","8-5":"armistice","14-7":"fête nationale","15-8":"ascencion","1-11":"armistice","11-11":"toussain","25-12":"noel"};
//structure la date
function strucDate(dateX)
{return {"pos":dateX.getDay(),"jour":dateX.getDate(),"mois":dateX.getMonth()+1,"annee":dateX.getFullYear()};}
var dateS= strucDate(new Date());//date Selectionné
var dnow= strucDate(new Date());//date actuelle
//retourne le ième jour du 1er du mois
function premJourMois(mois,annee)
{return (new Date(annee,mois-1,1).getDay());}
//retourne le jour max du mois
function JmaxMois(mois,annee)
{return (new Date(annee,mois,0).getDate());}
/* Test une date si elle est correct...spécial killer*/
function testTypeDate(dateEntree)
{
tst=false;
try
{rc=dateEntree.split("/");nd=new Date(rc[2],(rc[1]-1),rc[0]);
tst=(rc[2]>1800&&rc[2]<2200&&rc[2]==nd.getFullYear()&&rc[1]==(nd.getMonth()+1)&&rc[0]==nd.getDate());
} catch(e) {}
return tst;
}
//selection de la zone avec la souris
function choix(koi,code)
{
if (code)
{ select_old= koi.style.background;
koi.style.background ='#c0c0FF';
}
else
{
koi.style.background =select_old;
}
}
function testTravail(oldX,xx,jj,mm,aa)
{
styleX="font-family:Tahoma;font-size:10px;text-align:center;";
styleX+=(oldX)?"":"color:#e0e0e0;";
styleX+="cursor:hand;border-right:1px #e0e0e0 solid;border-bottom:1px #e0e0e0 solid;";
if (jourPause[xx]||jourFeriee[jj+"-"+mm]!=null) styleX+="background:#f0f0f0;";
if (jj==dnow.jour&&mm==dnow.mois&&aa==dnow.annee) styleX+="border:2px red solid;";
return styleX;
}
//test si année bissextile
function bissextile(annee) {
return (annee%4==0 && annee %100!=0 || annee%400==0);
}
//Retourne le nombre de jour depuis le 1er janvier (num de semaine)
function nbJAnnee(dateX){
var nb_mois=[,0,31,59,90,120,151,181,212,243,273,304,334];
j=dateX.jour ; m=dateX.mois ; a=dateX.annee;
nb=nb_mois[m]+j-1 ;
if (bissextile(a) && m>2) nb++;
return nb;
}
//affiche le calendrier
function view_microcal(actif,ki,source,mxS,axS)
{
if (actif)
{
//decalage du mois su on clique sur -/+
if (mxS!=-1)
{
clearTimeout(cc);
document.getElementById(ki).focus();
fermable_microcal=true;
dateS.mois=mxS;
dateS.annee=axS;
if (dateS.mois<1) {dateS.annee--;dateS.mois+=12;}
if (dateS.mois>12) {dateS.annee++;dateS.mois-=12;}
}
//init
Dstart=(premJourMois(dateS.mois,dateS.annee)+7-startWeek)%7;
jmaxi=JmaxMois(dateS.mois,dateS.annee);
jmaxiAvant=JmaxMois((dateS.mois-1),dateS.annee);
//si on veux ajouter le numero de la semaine ...
//idxWeek=parseInt(nbJAnnee(strucDate(new Date(dateS.mois+'-01-'+dateS.annee)))/7,10)+1;
ymaxi=parseInt((jmaxi+Dstart+1)/7,10);
//generation du tableau
//--entête
htm="\";
htm+=\"-, \";
htm+=\" "+moisX[dateS.mois]+" "+dateS.annee+", \";
htm+=\"+, \";
//--corps
htm+=\"----
\";
//affichage des jours DLMMJVS
for (x=0;x<7;x++)
htm+=\""+JourM[(x+startWeek)%7]+", \";
htm+=\"\"
//------------------------
for (y=0;y<=ymaxi;y++)
{
htm+=\"----
\";
for (x=0;x<7;x++)
{
idxP=y*7+x-Dstart+1; //numero du jour
aa=dateS.annee;
xx=(x+startWeek)%7;
//jour du mois précedent
if (idxP<=0)
{
jj=idxP+jmaxiAvant;mm=dateS.mois-1;
if (mm==0)
{mm=12;aa--;}
htm+=\""+jj+", \";
}
else if (idxP>jmaxi) //jour du mois suivant
{
jj=idxP-jmaxi;mm=dateS.mois+1;
if (mm==13)
{mm=1;aa++;}
htm+=\""+jj+", \";}
else //jour du mois en cours
{
jj=idxP;mm=dateS.mois;
htm+=\""+jj+", \";}
}
htm+=\"\"
}//-------------------------
htm+="
"
//affiche le tableau
document.getElementById(source).innerHTML=htm;
document.getElementById(source).style.visibility="";
} else
{
//ferme le calendrier
if (fermable_microcal)
cc=setTimeout("document.getElementById('"+source+"').style.visibility='hidden'",500);
}
}
</script>
</head>
<center>
micro-calendrier par AmRouNiX (A. Selim)
http://www.crew.free.fr
Saisissez une date au format JJ/MM/AAAA
<center>
</html>
28 avril 2008 à 12:38
Source bien utile.
Tourne bien sous IE et safari
Par contre j'ai un problème sous Firefox : la console d'erreur Javascript m'indique "dateDebut is not defined".
dateDebut étant l'id de l'input.
Rencontrez-vous le même problème ? Si oui, Avez-vous trouvez une solution ?
Merci d'avance
CEFAR
28 avril 2008 à 10:58
@+ JLN
28 avril 2008 à 09:14
var jourFeriee = ={"1-1":"jour an","1-5":"fête du travail" ....
il manque juste le lundi de pâques & la pencôte à calculer !
28 avril 2008 à 06:34
Une amélioration (juste pour faire avancer) : Les jours fériés.
Sinon j'ai mis 10 aussi y a pas de raison !!!
Bonne prog,
@+ JLN
27 avril 2008 à 12:57
27 avril 2008 à 12:55
si vous avez des idées d'améliorations, je suis open !
26 avril 2008 à 23:02
26 avril 2008 à 23:01
c'est bon comme Script
26 avril 2008 à 11:28
26 avril 2008 à 11:20
Maintenant, je pense qu'il faut que tu t'atende a avoir des avis différents du miens et tu devrai aussi t'attendre a avoir des personne qui critique ton code, ça arrive a tout le monde, même au top des codes !!!
26 avril 2008 à 11:17
26 avril 2008 à 11:14
26 avril 2008 à 11:12
Tout d'abord je te félicite, on dirai que le plaisir de programmer en javascript t'es revenu !!!
Ensuite, je n'ai rien a redire !!!
Finalement 9/10