Discussion :

[Toiine]

Bonjour,

alors avant tout laissez moi vous dire que je ne connais absolument pas le JQuery et très peu le JavaScript.

Cependant j'en fais une utilisation très basique qui répond à mes besoins.

Voici un bout de code de ma page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
$(function() {
	$( "#startDatePicker" ).datepicker({ dateFormat: 'dd/mm/yy' }).val;
});
$(function() {
	$( "#endDatePicker" ).datepicker({ dateFormat: 'dd/mm/yy' }).val;
});

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<tr>
   <td>Dates :</td>
   <td>du <input type="text" class="shorter" name="startDate" id="startDatePicker"> au <input type="text" class="shorter" name="endDate" id="endDatePicker"><span style='color:red;'> *</span></td>
</tr>
<tr>
   <td>Durée en jours :</td>
   <td><input type="text" class="shorter" name="formTime" value="" /><span style='color:red;'> *</span></td>
</tr>

Ce que j'aimerai faire :
Récupérer les valeurs de mes 2 datepickers.
Calculer la durée en jours entre les 2 dates pour pouvoir la mettre en valeur par défaut du champ durée.
Afficher un message d'erreur si la date de fin est antérieure à la date de début (et forcer la saisie d'une date ultérieure).


Cordialement.

[Watilin]

Bonjour,

pour commencer tu peux grouper les opérations sur tes deux champs car on va faire la même chose sur les deux. Pour ça, tu utilises la virgule comme en CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$(function() {
	$( "#startDatePicker, #endDatePicker" ).datepicker({ dateFormat: 'dd/mm/yy' }).val;
});

Ensuite, le moment pertinent pour récupérer les valeurs des champs, c'est lorsque l'utilisateur interagit avec eux, donc on n'utilise pas tout de suite val. Au lieu de ça, on va placer une fonction pour surveiller les évènements change qui auront lieu sur les champs.
Et d'ailleurs, on ne va pas utiliser val, mais plutôt la méthode getDate du plugin Datepicker qui permet d'obtenir directement un objet Date, ce qui sera bien plus pratique pour les opérations qu'on veut faire avec.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
$(function() {
	$( "#startDatePicker, #endDatePicker" )
		.datepicker({ dateFormat: 'dd/mm/yy' })
		.change(function() {
			...
		});
});

La fonction qui, pour l'instant, contient les trois petits points sera appelée à chaque fois que l'utilisateur change la date dans l'un des deux champs. On va y placer le code pour calculer la durée entre les deux dates. Les deux premières lignes de cette fonction seront :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var startDate = ( "#startDatePicker" ).datepicker( "getDate" );
var endDate = ( "#endDatePicker" ).datepicker( "getDate" );

startDate et endDate sont de type Date. Les objets de ce type ont l'avantage de se transformer automatiquement en timestamps quand on fait des opérations mathématiques avec. En faisant la soustraction des deux dates, on a donc le nombre de millisecondes écoulées entre les deux. Il ne reste plus qu'à faire une petite division pour transformer ça en nombre de jours.

En partant avec des millisecondes,

on divise par 1000 pour avoir des secondes,
par 60 minutes,
encore par 60 heures,
enfin par 24 jours,

au total 1000 * 60 * 60 * 24 = 86 400 000.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var diff = endDate - startDate;
var diffJours = diff / 86400000;

En bonus on a un moyen facile de déterminer si les dates ont été « inversées » : la différence sera un nombre négatif. Dans ce cas tu peux signaler à l'utilisateur qu'il a inversé les dates, ou bien multiplier par -1 pour retrouver un nombre positif et corriger le problème.

La dernière étape c'est de mettre à jour la valeur du troisième champ. Tu n'as pas donné d'id à celui-ci, heureusement on peut y accéder par son nom.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$( "[name=formTime]" ).val(diffJours);

Voilà. Je ne te donne pas le code final mais il y a tous les éléments, à toi de coller tout ça ensemble

[Toiine]

Bonjour,

merci pour votre réponse, elle m'a beaucoup aidé.

Ça marche parfaitement après un petit changement (il manquait les $ ici) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var startDate = $( "#startDatePicker" ).datepicker( "getDate" );
var endDate = $( "#endDatePicker" ).datepicker( "getDate" );

Voici ce que j'ai actuellement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
$(function() {
	$( "#startDatePicker, #endDatePicker" ).datepicker({ dateFormat: 'dd/mm/yy' }).change(function(){
		var startDate = $( "#startDatePicker" ).datepicker( "getDate" );
		var endDate = $( "#endDatePicker" ).datepicker( "getDate" );
		if (typeof(startDate) != "undefined" && typeof(endDate) != "undefined"){
			var diff = (endDate - startDate) / 86400000;
			if (diff < 0)
				alert("Vous semblez avoir inversé la date de début et de fin.");
			else
				$( "[name=formTime]" ).val(diff);
		}
	});
});

Le problème est que ma condition pour vérifier que les 2 dates ont bien été sélectionnées ne fonctionne pas.
Est-ce une erreur de syntaxe de ma part ? Le choix de vérifier si le type est bien défini pour savoir si la variable est bien settée est peut-être mauvais aussi...


Cordialement.

[Watilin]

C'est dans la doc de getDate, je te remets le lien : http://api.jqueryui.com/datepicker/#method-getDate

Returns the current date for the datepicker or null if no date has been selected.

C'est un des défauts de JavaScript : contrairement à l'intuition, typeof null renvoie object. Tu peux simplement te contenter de tester les dates elles-mêmes comme si elles étaient de type booléen :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if (startDate && endDate) {

Et autant pour moi pour les $ manquants, je les avais oubliés