IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

activer/désactiver une liste déroulante + date calendrier


Sujet :

JavaScript

  1. #1
    Membre du Club
    Profil pro
    Inscrit en
    Juin 2005
    Messages
    112
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2005
    Messages : 112
    Points : 59
    Points
    59
    Par défaut activer/désactiver une liste déroulante + date calendrier
    Bonjour,

    pour augmenter un peu mes chances, je mets un lien vers un post déjà édité en rubrique HTML...(je pense que sa place est plutot ici)
    http://www.developpez.net/forums/viewtopic.php?t=433326

    avis aux modérateurs :
    si cela bouscule les règles du forum merci de me le signaler

  2. #2
    Membre du Club
    Profil pro
    Inscrit en
    Juin 2005
    Messages
    112
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2005
    Messages : 112
    Points : 59
    Points
    59
    Par défaut
    bonjour à tous et à toutes,

    je cherche toujours l'astuce de popup calendrier, comme ici en fait : http://www.voyages-sncf.com/

    là on peut choisir la date de départ et de retour, très pratique !!

    qui a le secret ?

  3. #3
    Expert confirmé
    Avatar de siddh
    Inscrit en
    Novembre 2005
    Messages
    3 868
    Détails du profil
    Informations personnelles :
    Âge : 48

    Informations forums :
    Inscription : Novembre 2005
    Messages : 3 868
    Points : 5 011
    Points
    5 011
    Par défaut
    as tu vraiment cherché dans google ?

  4. #4
    Membre du Club
    Profil pro
    Inscrit en
    Juin 2005
    Messages
    112
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2005
    Messages : 112
    Points : 59
    Points
    59
    Par défaut
    Citation Envoyé par siddh
    as tu vraiment cherché dans google ?
    meilleurs voeux pour tous !

    oui effectivement j'ai cherché sur google, et d'ailleurs c'est la première chose que je fais , j'ai trouvé des réponses mais qui donnent pas satisfaction

    je pense que beaucoup de gens rêvent de trouver la reponse !! c'est très pratique pour la saisie des dates de naissance etc, etc.... c'est beaucoup mieux que les trois listes déroulantes (jour, mois, année)...

    la meilleur chose que j'ai réussit à faire jusqu'à matnant c'est de prposer un seul champ de saisie libre et vérifier la saisie par des regexp et du javascript mais ce que je cherche cé bocou mieu.....

    pour moi c'est absolument faisable, puisque les autres l'ont fait avec un langage Web, reste à savoir comment

    il faut pas capituler devant l'ignorance !!

  5. #5
    Expert confirmé
    Avatar de pc75
    Profil pro
    Inscrit en
    Septembre 2004
    Messages
    3 662
    Détails du profil
    Informations personnelles :
    Âge : 69
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Septembre 2004
    Messages : 3 662
    Points : 4 047
    Points
    4 047
    Par défaut
    Bonjour,

    Fais une recherche sur GOGOL avec "date picker"

    Sinon, j'ai ça :



    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     
    					<input type="text" name="txtDateTests" value="" readonly size="10">
    					<a href="javascript:show_calendar('document.Monfrm.txtDateTests', document.Monfrm.txtDateTests.value);"><img src="../../../images/cal.gif" width="16" height="16" border="0" alt="Cliquez pour le calendrier"></a>

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
     
    function show_calendar(str_target, str_datetime) {
    	var arr_months = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
    		"Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
    	var week_days = ["Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa"];
    	var n_weekstart = 1; // day week starts from (normally 0 or 1)
     
    // Si la date est invalide : Initialisation avec la date du jour
    var test_date = /^(\d+)\/(\d+)\/(\d+)$/;
    if (!test_date.exec(str_datetime))
    {
    var d = new Date();
    var str_datetime = d.getDate() + "/" + (d.getMonth() + 1) + "/" + d.getYear();
    }
     
    	var dt_datetime = (str_datetime == null || str_datetime =="" ?  new Date() : str2dt(str_datetime));
     
    	var dt_prev_month = new Date(dt_datetime);
    	dt_prev_month.setMonth(dt_datetime.getMonth()-1);
    	var dt_next_month = new Date(dt_datetime);
    	dt_next_month.setMonth(dt_datetime.getMonth()+1);
     
    	var dt_prev_year = new Date(dt_datetime);
    	dt_prev_year.setFullYear(dt_datetime.getFullYear()-1);
    	var dt_next_year = new Date(dt_datetime);
    	dt_next_year.setFullYear(dt_datetime.getFullYear()+1);
     
    	var dt_firstday = new Date(dt_datetime);
    	dt_firstday.setDate(1);
    	dt_firstday.setDate(1-(7+dt_firstday.getDay()-n_weekstart)%7);
    	var dt_lastday = new Date(dt_next_month);
    	dt_lastday.setDate(0);
     
    	// html generation (feel free to tune it for your particular application)
    	// print calendar header
    	var str_buffer = new String (
    		"<html>\n"+
    		"<head>\n"+
    		"	<title>Calendrier</title>\n"+
    		"</head>\n"+
    		"<body bgcolor=\"White\">\n"+
    		"<table class=\"clsOTable\" cellspacing=\"0\" border=\"0\" width=\"100%\">\n"+
    		"<tr><td bgcolor=\"#4682B4\">\n"+
    		"<table cellspacing=\"1\" cellpadding=\"3\" border=\"0\" width=\"100%\">\n"+
     
    // Ligne Année précédente / suivante
    		"<tr>\n	<td bgcolor=\"blue\"><a href=\"javascript:window.opener.show_calendar('"+
    		str_target+"', '"+ dt2dtstr(dt_prev_year)+"');\">"+
    		"<img src=\"http://???/images/prev.gif\" width=\"16\" height=\"16\" border=\"0\""+
    		" alt=\"Année précédente\"></a></td>\n"+
    		"	<td align=\"center\" bgcolor=\"blue\" colspan=\"5\">"+
    		"<font color=\"white\" face=\"tahoma, verdana\" size=\"2\">"
    		+" "+dt_datetime.getFullYear()+"</font></td>\n"+
    		"	<td bgcolor=\"blue\" align=\"right\"><a href=\"javascript:window.opener.show_calendar('"
    		+str_target+"', '"+dt2dtstr(dt_next_year)+"');\">"+
    		"<img src=\"http://???/images/next.gif\" width=\"16\" height=\"16\" border=\"0\""+
     
    		" alt=\"Année suivante\"></a></td>\n</tr>\n"+
     
    // Ligne Mois précédent / suivant
    		"<tr>\n	<td bgcolor=\"#4682B4\"><a href=\"javascript:window.opener.show_calendar('"+
    		str_target+"', '"+ dt2dtstr(dt_prev_month)+"');\">"+
    		"<img src=\"http://???/images/prev.gif\" width=\"16\" height=\"16\" border=\"0\""+
    		" alt=\"Mois précédent\"></a></td>\n"+
    		"	<td align=\"center\" bgcolor=\"#4682B4\" colspan=\"5\">"+
    		"<font color=\"white\" face=\"tahoma, verdana\" size=\"2\">"
    		+arr_months[dt_datetime.getMonth()]+" "+dt_datetime.getFullYear()+"</font></td>\n"+
    		"	<td bgcolor=\"#4682B4\" align=\"right\"><a href=\"javascript:window.opener.show_calendar('"
    		+str_target+"', '"+dt2dtstr(dt_next_month)+"');\">"+
    		"<img src=\"http://???/images/next.gif\" width=\"16\" height=\"16\" border=\"0\""+
    		" alt=\"Mois suivant\"></a></td>\n</tr>\n"
     
    	);
     
    	var dt_current_day = new Date(dt_firstday);
    	// print weekdays titles
    	str_buffer += "<tr>\n";
    	for (var n=0; n<7; n++)
    		str_buffer += "	<td bgcolor=\"#87CEFA\">"+
    		"<font color=\"white\" face=\"tahoma, verdana\" size=\"2\">"+
    		week_days[(n_weekstart+n)%7]+"</font></td>\n";
    	// print calendar table
    	str_buffer += "</tr>\n";
    	while (dt_current_day.getMonth() == dt_datetime.getMonth() ||
    		dt_current_day.getMonth() == dt_firstday.getMonth()) {
    		// print row heder
    		str_buffer += "<tr>\n";
    		for (var n_current_wday=0; n_current_wday<7; n_current_wday++) {
    				if (dt_current_day.getDate() == dt_datetime.getDate() &&
    					dt_current_day.getMonth() == dt_datetime.getMonth())
    					// print current date
    					str_buffer += "	<td bgcolor=\"#FFB6C1\" align=\"right\">";
    				else if (dt_current_day.getDay() == 0 || dt_current_day.getDay() == 6)
    					// weekend days
    					str_buffer += "	<td bgcolor=\"#DBEAF5\" align=\"right\">";
    				else
    					// print working days of current month
    					str_buffer += "	<td bgcolor=\"white\" align=\"right\">";
     
    				if (dt_current_day.getMonth() == dt_datetime.getMonth())
    					// print days of current month
    					str_buffer += "<a href=\"javascript:window.opener."+str_target+
     
    //					".value='"+dt2dtstr(dt_current_day)+"'+document.cal.time.value; window.close();\">"+
    					".value='"+dt2dtstr(dt_current_day)+"'; window.close();\">"+
     
    					"<font color=\"black\" face=\"tahoma, verdana\" size=\"2\">";
    				else 
    					// print days of other months
     
     
    					//str_buffer += "<a href=\"javascript:window.opener."+str_target+
    					//".value='"+dt2dtstr(dt_current_day)+"'+document.cal.time.value; window.close();\">"+
    					str_buffer += "<font color=\"gray\" face=\"tahoma, verdana\" size=\"2\">";
    				str_buffer += dt_current_day.getDate()+"</font></a></td>\n";
     
    //					str_buffer += "<a href=\"javascript:window.opener."+str_target+
    //					".value='"+dt2dtstr(dt_current_day)+"'+document.cal.time.value; window.close();\">"+
    //					"<font color=\"gray\" face=\"tahoma, verdana\" size=\"2\">";
    //				str_buffer += dt_current_day.getDate()+"</font></a></td>\n";
    				dt_current_day.setDate(dt_current_day.getDate()+1);
    		}
    		// print row footer
    		str_buffer += "</tr>\n";
    	}
    	// print calendar footer
    	str_buffer +=
    //		"<form name=\"cal\">\n<tr><td colspan=\"7\" bgcolor=\"#87CEFA\">"+
    //		"<font color=\"White\" face=\"tahoma, verdana\" size=\"2\">"+
    //		"Heure : <input type=\"text\" name=\"time\" value=\""+dt2tmstr(dt_datetime)+
    //		"\" size=\"8\" maxlength=\"8\"></font></td></tr>\n</form>\n" +
    //		"</table>\n" +
    		"</tr>\n</td>\n</table>\n" +
    		"</body>\n" +
    		"</html>\n";
     
    	var vWinCal = window.open("", "Calendar", 
    		"width=200,height=235,status=no,resizable=no,top=200,left=200,toolbar=no,location=no,directories=no,menubar=no");
     
    	vWinCal.opener = self;
    	var calc_doc = vWinCal.document;
    	calc_doc.write (str_buffer);
    	calc_doc.close();
    }
    // datetime parsing and formatting routimes. modify them if you wish other datetime format
    function str2dt (str_datetime) {
    //	var re_date = /^(\d+)\-(\d+)\-(\d+)\s+(\d+)\:(\d+)\:(\d+)$/;
    	var re_date = /^(\d+)\/(\d+)\/(\d+)$/;
    	if (!re_date.exec(str_datetime))
    		return alert("Invalid Datetime format: "+ str_datetime);
    	return (new Date (RegExp.$3, RegExp.$2-1, RegExp.$1, RegExp.$4, RegExp.$5, RegExp.$6));
    }
    function dt2dtstr (dt_datetime) {
    	return (new String (
    //			dt_datetime.getDate()+"-"+(dt_datetime.getMonth()+1)+"-"+dt_datetime.getFullYear()+" "));
    			dt_datetime.getDate()+"/"+(dt_datetime.getMonth()+1)+"/"+dt_datetime.getFullYear()));
    }
    function dt2tmstr (dt_datetime) {
    //return;
    	return (new String (
    			dt_datetime.getHours()+":"+dt_datetime.getMinutes()+":"+dt_datetime.getSeconds()));
    }

  6. #6
    Membre du Club
    Profil pro
    Inscrit en
    Juin 2005
    Messages
    112
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2005
    Messages : 112
    Points : 59
    Points
    59
    Par défaut
    ben rien à dire !! merci boucoup !! tu nous as maché le boulot !! bravo !!

    pour une utilisation parfaite et sans même réfléchir une seconde ou toucher à quoi que ce soit, voici 5 consignes à respecter :

    1- remercier pc75
    2- ajouter l'entete
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <script language="JavaScript" type="text/javascript">
    puis copier-coller le grand code et ajouter à sa fin "</script> (pas compliqué j'espere !!)
    3- mettre ensuite
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    [color=red]<form id="Monfrm" name="Monfrm" method="post" action="">[/color]
     <input type="text" name="txtDateTests" value="" readonly size="10">
     <a href="javascript:show_calendar('document.Monfrm.txtDateTests', document.Monfrm.txtDateTests.value);"><img src="../../../images/cal.gif" width="16" height="16" border="0" alt="Cliquez pour le calendrier"></a> 
    [color=red]</form>[/color]
    4- demander à pc75 les images "next.gif", "prev.gif" et "cal.gif", mettez-les au bon endroit.
    5- même s'il vous le refuse, dites-le bonne année et merci !!

    Moralité : ceci m'a dépanné une fois, mais comment je ferai pour les autres fois ?! il est tant pour doubler mon effort !!

  7. #7
    Membre du Club
    Profil pro
    Inscrit en
    Juin 2005
    Messages
    112
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2005
    Messages : 112
    Points : 59
    Points
    59
    Par défaut
    attendez les mecs et les filles !!

    le code ci-dessus a un bug à corriger... sous firefox l'année s'affiche par centaines et pas par milliers !! 2006 est affiché en 106, 2005 en 105...

    sous IE pas de probleme...

    à mon avis, le bug est lié à l'interprétation que firefox donne à certains scripts de date...

    je garde le topic en "résolu" pour l'instant

    à suivre...

  8. #8
    Expert confirmé
    Avatar de siddh
    Inscrit en
    Novembre 2005
    Messages
    3 868
    Détails du profil
    Informations personnelles :
    Âge : 48

    Informations forums :
    Inscription : Novembre 2005
    Messages : 3 868
    Points : 5 011
    Points
    5 011
    Par défaut
    j'ai pas regardé le code mais tu doit avoir un getYear a remplacer par getFullYear

  9. #9
    Expert confirmé
    Avatar de pc75
    Profil pro
    Inscrit en
    Septembre 2004
    Messages
    3 662
    Détails du profil
    Informations personnelles :
    Âge : 69
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Septembre 2004
    Messages : 3 662
    Points : 4 047
    Points
    4 047
    Par défaut
    Re,

    Citation Envoyé par toome
    2- ajouter l'entete
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <script language="JavaScript" type="text/javascript">
    puis copier-coller le grand code et ajouter à sa fin "</script> (pas compliqué j'espere !!)
    On peut faire plus clean en mettant le code dans un fichier :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    <script language="JavaScript" src="../../Scripts/dt_picker.js">

    Citation Envoyé par toome
    4- demander à pc75 les images "next.gif", "prev.gif" et "cal.gif", mettez-les au bon endroit.
    Elles sont là :

    http://cjoint.com/?bdiPGH1Evo

    [/code]

  10. #10
    Expert confirmé
    Avatar de siddh
    Inscrit en
    Novembre 2005
    Messages
    3 868
    Détails du profil
    Informations personnelles :
    Âge : 48

    Informations forums :
    Inscription : Novembre 2005
    Messages : 3 868
    Points : 5 011
    Points
    5 011
    Par défaut
    en fouillant la dedans, tu trouveras des calendriers :
    http://www.developpez.net/forums/viewtopic.php?t=222163

  11. #11
    Membre du Club
    Profil pro
    Inscrit en
    Juin 2005
    Messages
    112
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2005
    Messages : 112
    Points : 59
    Points
    59
    Par défaut
    merci siddh & pc75 et aussi les autres...
    le script marche très bien, sauf là quand j'ai voulu l'intégrer dans une page que j'avais déjà ça plante avec IE mais pas avec FireFox... ce qui me pose proble c'est un include d'une template qui n'as rien d'autre que le graphique, un header et un appel à la feuille de style...
    je ne vois pas où ets le problème surtout que ça a marché avec FF....!!

    j'ai bien voulu vous montrer la template mais elle n'a rien de spécial !!!

    voci le code :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
     
    <? include "template.php"; ?>
    <script language="JavaScript" src="library/calendar.js">
    </script>
     
    <div class="center_1">
    <p>
    <a href="javascript:show_calendar('document.Monfrm.txtDateTests', document.Monfrm.txtDateTests.value);"></a> 
    </p>
    <form id="Monfrm" name="Monfrm" method="post" action="">
      <input type="text" name="txtDateTests" value="" readonly size="10" />
      <a href="javascript:show_calendar('document.Monfrm.txtDateTests', document.Monfrm.txtDateTests.value);">
      <img src="img/Calendar.gif" width="16" height="16" border="0" alt="Cliquez pour le calendrier" /></a>
    </form>
    </div>
    <? include "template_bas.php"; ?>

  12. #12
    Membre du Club
    Profil pro
    Inscrit en
    Juin 2005
    Messages
    112
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2005
    Messages : 112
    Points : 59
    Points
    59
    Par défaut
    probleme résolu...

    Bonne journée

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Activer/Désactiver une liste déroulante
    Par Goupo dans le forum jQuery
    Réponses: 5
    Dernier message: 29/09/2009, 10h12
  2. Activation d'une Liste déroulante par un bouton
    Par martoune dans le forum Langage
    Réponses: 3
    Dernier message: 27/06/2007, 23h28
  3. activer/désactiver une liste déroulante
    Par martoune dans le forum Général JavaScript
    Réponses: 15
    Dernier message: 27/06/2007, 17h23
  4. Désactiver une liste déroulante
    Par Virtual78 dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 20/07/2006, 02h30
  5. activer/désactiver une liste déroulante + date calendrier
    Par toome dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 05/01/2006, 15h56

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo