[AJAX] Choisir une date avec AJAX

**Niki59** · 20/12/2008, 16h52

Bonjour � tous et merci d'�tre venu lire mon sujet,

J'ai cr�e sur ma page PHP un possibilit� pour le visiteur de choisir une date.
Le visiteur choisit la le jour par une liste-box, le mois par une list-box, et l'ann�e par une list-box.

En gros sa se pr�sente comme ca (3 list-box cote-�-cote) :
[01 <] [Janvier <] [2009 <]

La liste-box du jour va de 01 � 31 quelques soit le mois.
La liste-box du jour va de Janvier � D�cembre.
La liste-box de l'ann�e va de "l'ann�e actuelle" � "l'ann�e actuelle +1".

Le probl�me :
Je voudrais en fait que le cas des ann�es bissextile soit g�r�.
Que le 31 f�vrier n'existe pas.

Je me suis inspir� du tutoriel du site et je l'ai model� en fonction de mes besoins :
http://www.ssb-france.com/beta/

Tout marche sauf quand je veux choisir le mois de Fevrier.

**popovitch130** · 21/12/2008, 10h50

Shalom !

Il y a des outils tout pret pour ce genre de chose. Personnellement, j'ai test� un calendrier bas� sur JQuery : http://ui.jquery.com/, c'est que j'ai vu de mieux sur le web. Il suffit d'inclure 2 fichiers js (1 pour r�gler les param�tre en FR) et une CSS, et d'initialiser ton "input type text" :

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
 
 @import url("js/jquery.ui-1.5.2/ui.datepicker.css");
<script type="text/javascript" src="js/jquery.ui-1.5.2/ui.datepicker.min.js"></script>
<script type="text/javascript" src="js/jquery.ui-1.5.2/ui.datepicker-fr.js"></script>
<script type="text/javascript"> ...
var date_naissance_defaut = new Date('1980','0','01');
 
		// DATE DE NAISSANCE
		$('#date_de_naissance').datepicker({
				  dateFormat: 'dd-mm-yy',
				  buttonImage: '../images/calendar.png', // un bouton
				  buttonImageOnly: true, // activé seulement sur clic du bouton
				  defaultDate: date_naissance_defaut,
				  yearRange: '1920:2010', // intervalle de choix
				  mandatory: true, // obligatoire ou non
				  showOn: 'button' 
		});
</script>

et l� tu as toute la doc :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

http://docs.jquery.com/UI/Datepicker/datepicker#options

Bon dimanche

P.S. : Si quelqu'un a d�j� eu a calculer les jours exacts de changement de saison ... �a m'interesse

**Kerod** · 21/12/2008, 14h30

C'est vrai qu'il existe des frameworks qui offre ce genre de possibilit�s et jQuery est vraiment bien

.

Mais pour r�pondre � ta question et si tu ne veux pas utiliser de frameworks pourquoi ne pas utiliser les fonctions date de PHP pour reg�n�rer le contenu de ton select ?

**Niki59** · 21/12/2008, 17h11

Merci popovitch130 >
Mais est-ce que cela marche sur tout les navigateurs, ou seulement les derniers, que se passe-t-il dans le cas ou Java (ou Javascript je sais plus) est d�sactiv�?

Merci Kerod >
D�sol� mais je vois pas bien de quoi tu parles et o� tu veux en venir, pour r�sumer la situation le visiteur arrive sur une page de produit et doit choisir une date de d�but de location et une date de fin de location :
http://www.ssb-france.com/clovis/index.php?cat=18&id=68

J'aurais juste aimer que certaines anomalies de nos calendrier soit comprises dans la s�lection de mes dates de d�part location et de fin location.

**Jumano** · 21/12/2008, 17h27

Bonjour,
Le probl�me vient que ta deuxi�me variable donc "idAnnee" n'est pas envoy�e � ta page ajax.php.
Tu peux utiliser la m�thode GET au lieu de POST et faire comme ceci, c'est � dire passer tes deux valeurs en param�tre de ton Url :

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
<script type='text/javascript'>
function getXhr(){
var xhr = null; 
if(window.XMLHttpRequest) // Firefox et autres
 xhr = new XMLHttpRequest(); 
else if(window.ActiveXObject){ // Internet Explorer 
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else { // XMLHttpRequest non supporté par le navigateur 
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
xhr = false; 
} 
return xhr;
}
/**
* Méthode qui sera appelée sur le onKeyUp
*/
function go(){
var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
leselect = xhr.responseText;
// On se sert de innerHTML pour modifier l'objet
document.getElementById('jour').innerHTML = leselect;
}
}
 
// Ici on transmet les variables en GET
var sel1 = document.getElementById('mois');
var idMois = sel1.options[sel1.selectedIndex].value;
var sel2 = document.getElementById('annee');
var idAnnee = sel2.options[sel2.selectedIndex].value;
 
xhr.open("GET","ajax.php?idMois="+idMois+"&idAnnee="+idAnnee,true);
 
// ne pas oublier de poster les arguments
xhr.send(null);
}
</script>

Et ta page ajax.php :

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
<?php
function listbox_jour ($jour='', $day)
{
   for ($i=1;$i<=$day;$i++)
   {    if ($i<10) $i='0'.$i;
		echo '<option value="',$i,'"'; if($i==$jour) { echo ' selected'; } echo '>',$i,'</option>'; }
   }
 
	echo "<select name='jour'>";
	if (isset($_GET["idMois"]) OR isset($_GET["idAnnee"]))
	{
			if		($_GET["idMois"] == '1')	{ listbox_jour ( '', 31 ); } // mois de janvier
			elseif	(($_GET["idMois"] == '2') AND ($_GET["idAnnee"] == '2008')) {listbox_jour ( '', 20 ); } // mois de fevrier 2008 (pur exemple)
			elseif	(($_GET["idMois"] == '2') AND ($_GET["idAnnee"] == '2009')) {listbox_jour ( '', 10 ); } // mois de fevrier 2009 (pur exemple)
			elseif	($_GET["idMois"] == '3')	{ listbox_jour ( '', 31 ); } // Mois de mars
			elseif	($_GET["idMois"] == '4')	{ listbox_jour ( '', 30 ); } // Etc...etc...
			elseif	($_GET["idMois"] == '5')	{ listbox_jour ( '', 31 ); } // Etc...etc...
			elseif	($_GET["idMois"] == '6')	{ listbox_jour ( '', 30 ); }
			elseif	($_GET["idMois"] == '7')	{ listbox_jour ( '', 31 ); }
			elseif	($_GET["idMois"] == '8')	{ listbox_jour ( '', 31 ); }
			elseif	($_GET["idMois"] == '9')	{ listbox_jour ( '', 30 ); }
			elseif	($_GET["idMois"] == '10')	{ listbox_jour ( '', 31 ); }
			elseif	($_GET["idMois"] == '11')	{ listbox_jour ( '', 30 ); }
			elseif	($_GET["idMois"] == '12')	{ listbox_jour ( '', 31 ); }
	}
	echo "</select>";
?>

**Kerod** · 21/12/2008, 17h28

Mais est-ce que cela marche sur tout les navigateurs, ou seulement les derniers, que se passe-t-il dans le cas ou Java (ou Javascript je sais plus) est d�sactiv�?

Faut savoir que jQuery est Cross-Browser donc fonctionnera sur la plupart des navigateurs. Maintenant si tu te soucies de la d�sactivation du JavaScript dans ce cas ta question n'a rien � faire sur le forum AJAX mais plus du c�t� PHP

Pour faire de l'AJAX il faut du JavaScript.

D�sol� mais je vois pas bien de quoi tu parles et o� tu veux en venir, pour r�sumer la situation le visiteur arrive sur une page de produit et doit choisir une date de d�but de location et une date de fin de location :
http://www.ssb-france.com/clovis/index.php?cat=18&id=68

Ton souci vient des dates de 28 � 31. En PHP tu peux connaitre le nombre de jour dans un mois et avec ce nombre tu peux facilement g�n�rer ton select

Jettes un oeil � cette fonction : date

**Niki59** · 21/12/2008, 17h36

Merci � tous pour vos r�ponses, la solution de Jumano marche.
Je vous tiens au courant de la situation.

**Kerod** · 21/12/2008, 18h56

Cela t'oblige � faire des tonnes de tests. Je vois pas pourquoi tu peux pas faire une boucle for (comme mis dans le code de Jumano) � l'exception que le $day contient la valeur du nombre de jour dans le mois choisi et plus besoin de test sur les mois.

Comment r�cup�rer le dernier jour d'un mois ? qui dit dernier jour dit nombre de jours.

Pourquoi se compliquer la vie quand on peut faire plus simple ?

**Niki59** · 21/12/2008, 19h30

Merci Kerod >

Je suis en train d'essayer ceci :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
<select name='jour'>
<?php 
for ($i=1;$i<=12; $i++)
{
if	($_GET["idMois"] == $i) listbox_jour ( '', date("t",mktime(0,0,0,$i,1,2008)) ); 
}
?>
</select>

[AJAX] Choisir une date avec AJAX

JavaScript

Discussions similaires

Partager

Partager