Discussion :

[yanning]

Bonjour,
je voudrais intégrer dans une page le datepicker de jquery-ui, sauf que j'aimerais que lorsque l'utilisateur choisit une date, que dans un input on retrouve la date de debut de la semaine correspondante et que dans un autre input on ait la fin.

Quelqu'un pour m'aider?, merci bien

[nef1912]

Bonjour,

Pour avoir la date de début, tu peux faire ça :

Code :

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

1
2
3
4
5
6
7
8
9
 
onSelect: function(date){
         var jour = new Date(date);
            var jourSelect = jour.getDay();
            if(jourSelect == 0) {
             jour.setDate(jour.getDate() - 6);
            }
          //et continuer en fonction des jours...
          $(this).val(jour);

Et c'est le même principe pour la date de fin.

[yanning]

Merci nerf1912,

cette fonction je devrais l'appeler comment pour qu'elle interagisse avec le datepicker?
ma question est peut triviale mais je suis vraiment nouveau en javascript,

du coup voila la gueule de mon script jusqu'ici

$(function() {
$( "#debsem" ).datepicker({
dateFormat:"dd/mm/yy",
showOn: "button",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
altField: "#finsem",
altFormat: "dd/mm/yy",

});

});

merci d'avance

[nef1912]

Il te suffit de l'appeler comme les autres fonctions que tu as mis.

Code :

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

1
2
3
4
5
 
altFormat: "dd/mm/yy",
onSelect: function(date){ 
                 ......
}

Et le code que je t'ai donné n'est pas complet, ce n'est qu'un début pour te guider.

Doc sur Datepicker

[yanning]

Merci beaucoup,

j'essaye et je te fais un retour des que je termine

[yanning]

rebonjour,

j'ai adpaté ma function comme si dessous, et effectivement je réussis à avoir la date de début de chaque semaine, maintenant j'aimerais que dans un champs alternatif, la date de fin de semaine puisse etre calculée en fonction de la nouvelle date, mais il récupere toujours la date qui a été choisie dans le datepicker.

code javascript:
$(function() {
$( "#debsem" ).datepicker({
showOn: "button",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
altField: "#finsem",
altFormat: "dd/mm/yy",
onSelect: function(date){
var jour = new Date(date);
var jourSelect = jour.getDay();
if(jourSelect == 2) {

jour.setDate(jour.getDate() - 1);
}else if(jourSelect == 3) {

jour.setDate(jour.getDate() - 2);
}else if(jourSelect == 4) {

jour.setDate(jour.getDate() - 3);
}else if(jourSelect == 5) {

jour.setDate(jour.getDate() - 4);
}else if(jourSelect == 6) {

jour.setDate(jour.getDate() - 5);
}else if(jourSelect == 0) {

jour.setDate(jour.getDate() - 6);
}
else{
jour.setDate(jour.getDate());
}
day=jour.getDate();
month=jour.getMonth()+1;
year=jour.getFullYear();
jour =day + "/" + month + "/" + year;
$(this).val(jour);
}
});

});

code html:

<label for="debsem">Semaine du: </label><input type="text" disabled id="debsem">&nbsp; <label for="finsem">Au: &nbsp;</label><input type="text" disabled id="finsem" size="30">

Merci

[nef1912]

Good!

Tu peux optimiser ton code en mettant quelque chose comme ça:

Code :

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

1
2
3
4
5
6
 
après avoir fait jourSelect==0 et le cas jourSelect == 1
 
else if(jourSelect>0 && jourSelect!=1) {
              jour.setDate(jour.getDate() - (jourSelect - 1));
            }

Ce qui évite les conditions à répétition.

Ensuite pour être sûr d'avoir bien compris, tu veux faire la même chose mais avec la date de fin de semaine? Par exemple pour cette semaine, je sélectionne le 12/08. Ca doit m'afficher 11/08 dans un input et 15/08 dans le second?

[yanning]

exactement tu a compris,

mais en fait je prend les semaines de lundi à dimanche, donc si tu choisit le 12/08 tu devrait avoir dans un champs 11/08 et dans l'autre 17/08 en gros,

merci pour l'optimisation

[nef1912]

D'accord. Et bien c'est le même principe mais dans l'autre sens.

Code :

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

1
2
3
4
5
6
7
8
 
if(jourSelect == 0) {
             jour.setDate(jour.getDate() + 6); //sens inverse, si c'est lundi ben on va au dimanche
            }
else if(jourSelect == 6) { //si c'est dimanche, ben on y reste
             jour.setDate(jour.getDate());  
            }
....

Et tu continues... soit avec le bout de code optimisé que je t'ai donné (mais en sens inverse), soit avec ta technique

[yanning]

excuse moi, je suppose que je dois modifier l'option altField de cette maniere:

altField: function(date){
var jour = new Date(date);
var jourSelect = jour.getDay();
if(jourSelect == 6) {
jour.setDate(jour.getDate());
}
$("#finsem").val(date);
},
altFormat: "dd/mm/yy"

mais je suppose qu'il y'a quelque chose qui cloche car je NaN comme résultat dans le champs finsem

[nef1912]

Il ne faut pas utiliser un seul altField pour tes deux dates de début et de fin. Il faut bien les séparer.
Tu es dans un nouveau datepicker là?

[yanning]

non, en fait je les ai mis dans le même datepicker, en fait j'aurais voulu qu'on n'ait plus à sélectionner la date de fin de semaine, mais que cela soit fait automatiquement une fois que la date de debut de semaine a été calculée

[nef1912]

Tu peux le faire de différentes manières.
Regarde quels événements peuvent être utiles, qui une fois déclenchés sur ton premier input rempli, exécuteraient tes fonctions datepicker.

[yanning]

Merci beaucoup nef1912 pour ton aide,

je m'en suis finalement sortit en sortant le deuxieme datepicker.

pour ceux que ca pourrait aider, voila la fonction finale.

$(function() {
$( "#debsem" ).datepicker({
showOn: "button",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
onSelect: function(date){
var jour = new Date(date);
var jourSelect = jour.getDay();

if(jourSelect == 0) {

jour.setDate(jour.getDate() - 6);
}else if(jourSelect>0 && jourSelect!=1) {

jour.setDate(jour.getDate() - (jourSelect - 1));
}else{
jour.setDate(jour.getDate());
}
jour =jour.getDate() + "/" + (jour.getMonth()+1) + "/" + jour.getFullYear();
$(this).val(jour);

var fin = $.datepicker.parseDate('dd/mm/yy', jour);
fin.setDate(fin.getDate() + 6);
fin =fin.getDate() + "/" + (fin.getMonth()+1) + "/" + fin.getFullYear();
$('#finsem').datepicker('setDate', fin);
}
});

$('#finsem').datepicker({
dateFormat: "dd/mm/yy"
});
});

je ne sais pas si c'est optimisé mais ca marche tout de mem

merci encore nef

[yanning]

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
 
$(function() {
	$( "#debsem" ).datepicker({
		showOn: "button",
		buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
		buttonImageOnly: true,
		onSelect: function(date){
			var jour = new Date(date);
			var jourSelect = jour.getDay();
 
			if(jourSelect == 0) {
 
				jour.setDate(jour.getDate() - 6);
			}else if(jourSelect>0 && jourSelect!=1) {
 
				jour.setDate(jour.getDate() - (jourSelect - 1));
			}else{
				jour.setDate(jour.getDate());
			}
			jour =jour.getDate() + "/" + (jour.getMonth()+1) + "/" + jour.getFullYear();
			 $(this).val(jour);
 
			 var fin = $.datepicker.parseDate('dd/mm/yy', jour);
		        fin.setDate(fin.getDate() + 6); 
				fin =fin.getDate() + "/" + (fin.getMonth()+1) + "/" + fin.getFullYear();
		        $('#finsem').datepicker('setDate', fin);
		}
	});
 
	$('#finsem').datepicker({
		dateFormat: "dd/mm/yy"
	});
});