[AJAX] Choisir une date avec AJAX

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

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, 11h50

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, 15h30

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, 18h11

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, 18h27

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, 18h28

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