[AJAX] Choisir une date avec AJAX

Version imprimable

20/12/2008, 16h52
Niki59

2 pièce(s) jointe(s)

[AJAX] Choisir une date avec AJAX

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.

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:

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:

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

21/12/2008, 14h30
Kerod

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

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 ?
21/12/2008, 17h11
Niki59

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.

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:

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:

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>";
?>

21/12/2008, 17h28
Kerod

Citation:

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 :aie: Pour faire de l'AJAX il faut du JavaScript.

Citation:

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
21/12/2008, 17h36
Niki59

Merci à tous pour vos réponses, la solution de Jumano marche.
Je vous tiens au courant de la situation.
21/12/2008, 18h56
Kerod

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 ?

Merci Kerod >

Je suis en train d'essayer ceci :

Code:

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>