Bonjour,

Je suis actuellement en train de développer une appli web de gestion des conges sur la base d'une appli existante.

Je m'occupe actuellement de refondre la page de demande de congés, dans laquelle j'utilise deux DatePicker et je souhaiterais pouvoir afficher dans un champ de mon formulaire (qui est en readonly) le nombre de jours pris pour le congés sélectionné (avant sans que l'utilisateur n'ait besoin de valider le form). J’intègre sans problème les DatePickers à ma page pour sélectionner les dates, mais impossible de trouver comment faire proc les event onChange ... J'ai essayé tout ce que j'ai pu voir sur les différents forum que j'ai consulté mais rien ne fonctionne ... N'ayant pas un niveau exceptionnel en JS (et encore moins en JQuery), je me dis que j'ai peut-être mal compris quelquechose, mais toujours est-il que là ... je rame.

Voici l’état actuel de mon code :

        Partie JQuery :

	
					$( "#datepicker_debut").datepicker({
						dateFormat: "dd-mm-yy", onSelect: function(selectedDate){
						compter_jours_date();
						$('#datepicker_debut').trigger('change');
					}});
					
					$( "#datepicker_fin").datepicker({
						dateFormat: "dd-mm-yy", onSelect: function(selectedDate){
						compter_jours_date();
						$('#datepicker_fin').trigger('change');
					}});

et pour l'html/php

<input type="text" id="datepicker_debut" name="new_debut" onChange="compter_jours_date();return false;">

J'ai déjà essayé d'enlever l'attribut onChange de mon code html ou d'enlever les parametres de onChange dans la définition de mes datepickers mais rien n'y fait ...

En esperant que vos lumières sauront m’éclairer ...

Merci

-
Edité par geoffroythiebaut 19 mai 2014 à 13:03:23

Il nous faut aussi le code de la fonction compter_jours_date car a priori tout est juste, c'est dans la fonction que ça coince.

Et mets le html avec le datepicker de début de fin et le champ readonly. Là, il nous manque beaucoup trop de code.

PS: sers-toi de la console de ton navigateur pour déboguer et tester ton javascript, c'est une base essentielle (voir le tutoriel de débogage du JavaScript sur ce site).

Mon problème ne vient pas de ma fonction compter_jour_date, j'ai essayé de la remplacer par la fonction d'affichage suivante pour tester et l'event onChange ne proc' pas non plus ... :

$( "#datepicker_debut").datepicker({
    dateFormat: "dd-mm-yy", onSelect: function(selectedDate){
    afficher_dates();
    $('#datepicker_debut').trigger('change');
}});
 
$( "#datepicker_fin").datepicker({
    dateFormat: "dd-mm-yy", onSelect: function(selectedDate){
    afficher_dates();
    $('#datepicker_fin').trigger('change');
}});

et la fonction :

function afficher_dates(){
	var date_debut = document.getElementById("datepicker_debut").value;
	var date_fin = document.getElementById("datepicker_fin").value;
	alert(date_debut+" to "date_fin);
}

Voici l'input text en readonly qui reçoit le resultat de compter_jours_date()

<input type="text" name="new_nb_jours" size="30" maxlength="30" style="background-color: #D4D4D4; " readonly="readonly">

et les deux datepickers

<input type="text" id="datepicker_debut" name="new_debut">

<input type="text" id="datepicker_fin" name="new_fin">

-
Edité par geoffroythiebaut 19 mai 2014 à 16:09:52

Il y a une erreur de syntaxe dans ton code. Or il suffit d'ouvrir la console du navigateur pour avoir des messages d'erreur qui précis qui relèvent ce genre d'erreur. Donc je le répète une deuxième fois, commence par apprendre à déboguer ton JS :

http://fr.openclassrooms.com/informatique/cours/dynamisez-vos-sites-web-avec-javascript/deboguer-votre-code

Problème fixé, j'ai en effet trouvé la source via la console du navigateur mais je n'ai décelé aucune erreur de syntaxe dans le code (je l'ai peut être corrigé malgré moi, j'ai ajouté du contenu dans la définition de mes datepickers).

La version de JQuery inclue dans l'existant sur lequel je travail s’avérait être relativement dépassée ... :/

Merci pour le coup de main tout de même, l'interface console est visiblement une base que je n'avais pas x)

Ici, il manquait un + :

alert(date_debut+" to "date_fin);