affichage d'une date en fonction d'une autre date

**aectie** · 09/12/2014, 11h07

Bonjour,
j'ai créer un formulaire pour les demandes de congés.
j'ai 3 champs à remplir:
date_permission (pour la saisie de la date à laquelle l'employé prendra son congé)
nombr_jour (pour le nombre de jour de congés)
date_retour (pour la date de retour de l'employe)

j'aimerais que apres la saisie de la date de permission et du nombre de jours, la date de retour s'affiche de facon automatique.
merci de m'aider

**ocalik** · 09/12/2014, 11h16

Bonjour,
Vous pouvez essayer de réaliser cette fonction :

Code :

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

1
2
 
date('Y-m-d',strtotime('+'.$nb_jours.' days',strtotime($date_permission)));

cela devrait fonctionner.

Cependant j'imagine que vous souhaitez le faire en javascript, vous pouvez le faire ainsi :
1) recuperer le champs date et d'en créer une variable date
2) recuperer le nombre de jours
3) incrementer la variable date avec le nombre de jours

Code :

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

1
2
3
4
5
 
var date_permission = document.getElementById("date_permission");
var nb_jours = document.getElementById("nb_jours");
var date_final = new Date(date_permission)
date_final.setDate(date_final.getDate() + nb_jours);

Bien sur il faut construire la variable date_final correctement en formatant le resultat de date_permission, je vous invite a voir le manuel de la classe Date javascript.

**aectie** · 09/12/2014, 15h29

je programme en php.
cependant comment faire pour recuperer les variables nb_jour et date_permis puisqu'il n'ya pas de validation.
c'est apres la saisie de la date de permission et le nombre de jour que le champs date retour doit etre renseigner automatiquement
.

**ocalik** · 09/12/2014, 15h41

Rebonjour,

En php tu ne peux pas modifier dynamiquement une page, il faudrait pour cela réaliser une nouvelle requête HTTP.
C'est pourquoi j'ai proposé l'utilisation de javascript, qui est entre autre là pour réaliser les modification dynamique de page.

**aectie** · 11/12/2014, 11h35

Bonjour,
excusez moi j'avais un problème de connexion ces jours-ci.

Bien sur il faut construire la variable date_final correctement en formatant le résultat de date_permission, je vous invite a voir le manuel de la classe Date javascript.

j'aimerais savoir de quelle classe Date javascript vous parler.je vous rappelle que je suis débutante dans la programmation.
je ne sais vraiment pas ou mettre le code que vous m'avez envoyé.
merci

**ocalik** · 11/12/2014, 12h24

Le javascript est un langage complementaire (entre autre) a HTML, calculé par le navigateur de l'utilisateur, contrairement au PHP qui est calculé sur le serveur, il peut etre mis dans la page HTML dans la balise body (de préférence juste </body> dans des balise <script></script> ou dans un fichier externe .js appelé dans la balise <head></head>

Il permet de faire des interactions dynamique sur la page, contrairement à PHP qui ne permet que des rendus que je vais nommer statiques.

Sur ta page tu as 3 inputs HTML
date_permission, nb_jours, date_retour

En enregistrant la date_permission et le nb_jours, tu as besoin d'une interaction et d'un calcul dynamique qui va afficher en live la date_retour.

Je ne sais pas comment tu construit ta date_permission je vais supposer que tu le construit selon le format suivant : YYYY-MM-DD (année-mois-jours)

Concernant l'objet Date de javascript, une recherche google te donnera ce resultat : www.developpez.net/forums/newreply.php?do=postreply&t=1486553

Si la notion d'objet t'es inconnu, cela n'est pas grave, tu apprendras cela en temps et en heure utile, pour faire simple, les objets sont un ensemble de variable et de fonctions travaillant ensemble afin d'offrir certains service, dans cette exemple une gestions des dates, tu as des objets gérant les connexions a la base de données, gérant les actions utilisateur etc.

La page de manuel te montre les différents parametre que l'objet Date accepte afin de construire une date, dans le code ci-dessous nous allons utilisé le 3eme constructeur du manuel

Code :

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

 var d = new Date(dateString);

Donc d'un point de vue code javascript tu dois faire ceci

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function calcul_date_retour(){
//Récupération de la date de permission
var date_permission = document.getElementById("date_permission").value; // var date_permission = YYYY-MM-JJ
var nb_jours = document.getElementById("nb_jours").value; // var nb_jours = 1 ou 2 ou X
//On construit l'objet Date
var date = new Date(date_permission);
//On ajout a la date le nombre de jours d'absence 
date.setDate(date.getDate + nbjours);
//On affiche le resultat sur date_retour
document.getElementById("date_retour").value = date.getDate();
}
//On précise a la page d'effectuer le calcul de la date a chaque fois qu'on écris dans date_permission ou nb_jours
document.getElementById('date_permission').onkeyup = calcul_date_retour;
document.getElementById('nb_jours').onkeyup = calcul_date_retour;

document.getElementById("XXX"); permet de parcourir la page et de recuperer l'element qui possede l'attribut XXX
dans le code que j'ai fourni, ton input date_permission doit etre comme ceci

Code html :

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

<input type="text" id="date_permission" name="date_permission" />

Copie colle ce script avant la fermeture de ta balise </body> ou dans un fichier externe que tu appelle dans la balise <head> avec

Code html :

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

<script type="text/javascript" src="chemin_vers_ton_js.js" ></script>

(Recommandé)
En adaptant le code a ta page, cela devrait répondre a ton problème

PS: Pour débugger le javascsript je ne peux que te conseiller d'utiliser Firebug, qui est un plugin Firefox (je crois qu'il existe sur d'autre navigateur), qui te permet de voir les erreurs Javascript de la page.

**aectie** · 11/12/2014, 15h46

je suis encore le
j'ai saisi le script sur dans ma page mais toujours rien.
avec les recherches j'ai ajouté ceci

Code html :

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

1
2
<tr><input type="text" name="date_reprise" id="date_reprise" onFocus="javascript:calcul_date_reprise();" 
             /></tr>

dans mon code mais sa n'affiche rien

que dois-je faire pour que la date de reprise s'affiche dans son input après la saisie de le date de permission et du nombre de jours
merci

**ocalik** · 11/12/2014, 23h53

Lors de ton copié collé, tu as bien fait attention a bien adapter mon code avec le tiens ?

Car avec le code que je t'ai donné tu n'est pas censé placer l'attribut onfocus sur tes balises HTML (qui est une pratique qu'on apprend aux débutant, certes, mais qu'il faut très rapidement supprimer !)

Après normalement avec Firebug que tu peux installer, dans la rubrique "console" tu devrais recevoir des messages d'erreurs.

Sinon copie colle moi ton formulaire + ton copié coller de mon script.

**aectie** · 12/12/2014, 11h44

bonjour
voici mon code

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="champs_formulaire.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script>
$(function() {
	$( "#datepicker" ).datepicker({dateFormat: "dd-mm-yy", changeMonth: true, changeYear: true,showWeek: true, weekHeader: "W" });
});
$(function() {
	$( "#datepicker1" ).datepicker({dateFormat: "dd-mm-yy", changeMonth: true, changeYear: true,showWeek: true, weekHeader: "W" });
});
 
</script>
<script>
function calcul_date_reprise(){
//Récupération de la date de permission
var date_permis =document.getElementById("date_permis").value; // var date_permission = YYYY-MM-JJ
var nb_jour = document.getElementById("nb_jour").value; // var nb_jours = 1 ou 2 ou X
//On construit l'objet Date
var date = new Date(date_permis);
//On ajout a la date le nombre de jours d'absence 
date.setDate(date.getDate + nbjour);
//On affiche le resultat sur date_retour
document.getElementById("date_reprise").value = date.getDate();
}
//On précise a la page d'effectuer le calcul de la date a chaque fois qu'on écris dans date_permission ou nb_jours
document.getElementById('date_permis').onkeyup = calcul_date_reprise();
document.getElementById('nb_jour').onkeyup = calcul_date_reprise();
</script>
</head>
 
<body style="cursor: auto;">
 
        <tr>
            <td colspan="2">&nbsp;</td>
        </tr>
        <tr valign="middle">
            <td><label for="date_permis">Date de prise de congé : </label></td>
            <td><input type="text" name="date_permis" id="date_permis" required /></td>
        </tr>
        <tr>
            <td colspan="2">&nbsp;</td>
        </tr>
         <tr valign="middle">
            <td><label for="nb_jour">Nombre de jours : </label></td>
            <td><input type="text" name="nb_jour" id="nb_jour" required /></td>
        </tr>
        <tr>
            <td colspan="2">&nbsp;</td>
        </tr>
        <tr valign="middle">
            <td><label for="date_reprise">Date de reprise : </label></td>
            <td><input type="text" name="date_reprise" id="date_reprise" 
             /></td>
        </tr>
        <tr>
          <td colspan="2">&nbsp;</td>
        </tr>
 
<tr>
    <td>&nbsp;</td>
    <td><input name="ok" value="Enregistrer" type="submit" class="btn btn-warning"></td>

au prealabre id de la date de permission et de la date de reprise etait datepicker et datepicker1 pour que le calendrier s'affiche

**ocalik** · 12/12/2014, 13h55

Alors alors alors

Je viens de copier coller ton code, j'ai quelques détails :

Sur un message précédent, je t'avais conseillé de mettre la balise <script></script> JUSTE AVANT la fermeture de la balise <body></body>.

Lorsque ta page HTML est lu, le navigateur calcul dans l'ordre ligne par ligne le script.
Vu que tu avais mis

Code :

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

1
2
3
 
        document.getElementById('date_permis').onkeydown = calcul_date_reprise;
        document.getElementById('nb_jour').onkeydown = calcul_date_reprise;

Le javascript cherche un element HTML avec pour attribut id : date_permis et nb_jours, or lors de l'execution de cette partie de script, le navigateur n'a pas encore calculé ton body, il retourne donc une erreur (que tu vois dans la console de firebug, que je t'ai conseillé de regarder aussi), je vois que tu utilise JQuery, la il n'y a pas de soucis de mettre le script dans le <head></head>, car la fonction $(document).ready(function(){}); précise a JQuery d'attendre que la structure HTML soit déjà chargé avant de realiser son script !

Après, au niveau des variables, il y avait une erreur, nb_jour etait crée, mais la variable nbjour etait appelé quelques lignes plus bas.
et pour les lignes

Code :

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

1
2
3
 
        document.getElementById('date_permis').onkeyup = calcul_date_reprise();
        document.getElementById('nb_jour').onkeyup = calcul_date_reprise();

il fallait faire :

Code :

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

1
2
3
 
        document.getElementById('date_permis').onkeyup = calcul_date_reprise;
        document.getElementById('nb_jour').onkeyup = calcul_date_reprise;

On appelle, le nom de la fonction, et non la fonction en soit !

En reglant ces soucis la, il n'y a aucun problème c'est fonctionnel.

Et comme je suis gentil

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
46
47
48
49
50
51
52
 
<body>
<table>
<tr>
    <td colspan="2">&nbsp;</td>
</tr>
<tr valign="middle">
    <td><label for="date_permis">Date de prise de congé : </label></td>
    <td><input type="text" name="date_permis" id="date_permis" required /></td>
</tr>
<tr>
    <td colspan="2">&nbsp;</td>
</tr>
<tr valign="middle" va>
    <td><label for="nb_jour">Nombre de jours : </label></td>
    <td><input type="text" name="nb_jour" id="nb_jour" required /></td>
</tr>
<tr>
    <td colspan="2">&nbsp;</td>
</tr>
<tr valign="middle">
    <td><label for="date_reprise">Date de reprise : </label></td>
    <td><input type="text" name="date_reprise" id="date_reprise"
            /></td>
</tr>
<tr>
    <td colspan="2">&nbsp;</td>
</tr>
 
<tr>
    <td>&nbsp;</td>
    <td><input name="ok" value="Enregistrer" type="submit" class="btn btn-warning"></td>
 
</table>
    <script>
        function calcul_date_reprise(){
//Récupération de la date de permission
            var date_permis = document.getElementById("date_permis").value; // var date_permission = YYYY-MM-JJ
            var nb_jour = document.getElementById("nb_jour").value; // var nb_jours = 1 ou 2 ou X
//On construit l'objet Date
            var date = new Date(date_permis);
//On ajout a la date le nombre de jours d'absence
            date.setDate(date.getDate + nb_jour);
//On affiche le resultat sur date_retour
            document.getElementById("date_reprise").value = date.getDate();
        }
        //On précise a la page d'effectuer le calcul de la date a chaque fois qu'on écris dans date_permission ou nb_jours
        document.getElementById('date_permis').onkeyup = calcul_date_reprise;
        document.getElementById('nb_jour').onkeyup = calcul_date_reprise;
    </script>
 
</body>

Il y a des améliorations possibles, mais je te laisse le faire, ca fera un entrainement

Sinon j'ai quelques conseils, j'imagine que ca n'est pas le copié/collé complet de la page MAIS !

1) Il faut eviter de mettre les attributs style dans les balise HTML (comme pour le body), il faut utiliser les pages CSS et l'attribut class, et aussi éviter en général tous les attributs ayant un impact sur le design et lui préférer l'équivalent CSS,les classes css et les selecteurs sont la pour ca ! cela permet de centraliser tout le design sur une page et ne pas avoir a parcourir toute les pages du site en cas de modification, les attributs ne doivent servir en général qu'à définir des données !

2) Pour ton formulaire, je vois que tu utilise des <tr> et des <td>, mais il n'y a pas la balise <table>, elle est obligatoire pour valider le html.

3) En rapport avec le tableau, les tableaux, d'un point de vue sémantiques, ne doivent être utilisé que pour affiché des données, nécessitant un affichage sous forme de tableau (prix en fonction d'un produits, une liste d'utilisateurs avec des informations particuliers etc), pour un formulaire et pour une mise en page général, il ne faut pas utiliser de tableau mais les differentes balise HTML ainsi que le CSS.

4)

Code :

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

1
2
3
4
 
<tr>
    <td colspan="2">&nbsp;</td>
</tr>

Ici on a un exemple de morceau HTML inutiles, il est présent uniquement pour faire un écart, la gestion des marges/hauteurs et toute la mise en page, c'est en CSS ! le HTML ne sert que pour la structure !

J'espere que tout cela t'auras aider

**aectie** · 12/12/2014, 16h03

Rebonjour,
désolé mais j'ai tous suivis à la lettre mai sa ne marche pas chez moi.
la date de reprise ne s'affiche pas apres la saisie de la date permission et du nombre de jour

**ocalik** · 13/12/2014, 15h27

Installez firebug, et dites moi dans l'onglet console si vous avez des messages d'erreurs. (si oui lesquels)

Ensuite qu'inscrivez vous dans date_permis ? sur le modele que je vous ai envoyez il faut que le format soit : 2014-12-13 (13 déc 2014)
Après en manipulant le script vous pouvez le rendre plus souple.

**aectie** · 15/12/2014, 11h18

Bonjour,
j'ai fais tous ce que tu m'as demandé de faire mais une fois que je commence à saisir la date dans le champ date_permis le mot NaN s'affiche dans le champ date_reprise.

**aectie** · 15/12/2014, 13h31

je viens de modifier le code que vous m'avez envoyé et je me rend compte qu'il y avait une erreur

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
<script>
        function calcul_date_reprise(){
//Récupération de la date de permission
            var date_permis = document.getElementById("date_permis").value; // var date_permission = YYYY-MM-JJ
            var nb_jour = document.getElementById("nb_jour").value; // var nb_jours = 1 ou 2 ou X
//On construit l'objet Date
            var date = new Date(date_permis);
//On ajout a la date le nombre de jours d'absence
            date.setDate(date.getDate() + nb_jour);
//On affiche le resultat sur date_retour
 
		document.getElementById("date_reprise").value =  date.getDate();
        }
        //On précise a la page d'effectuer le calcul de la date a chaque fois qu'on écris dans date_permission ou nb_jours
        document.getElementById('date_permis').onkeyup = calcul_date_reprise;
        document.getElementById('nb_jour').onkeyup = calcul_date_reprise;
    </script>

j'ai ajouté des parentèses

Code :

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

1
2
3
 
//On ajout a la date le nombre de jours d'absence
            date.setDate(date.getDate() + nb_jour);

a la methode getDate.
Mais il ya encore d'autres problemes:

c'est seulement le jour qui s'affiche (soit 10 ou 20)
la date ne s'affiche pas au format date
lorsqu'on ajoute un nombre au dessus de 10,la date n'est pas correcte

**ocalik** · 15/12/2014, 22h18

Effectivement, je devais etre fatigué et je n'avais pas fait très attention

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function calcul_date_reprise(){
//Récupération de la date de permission
    var date_permis = document.getElementById("date_permis").value; // var date_permission = YYYY-MM-JJ
    var nb_jour = document.getElementById("nb_jour").value; // var nb_jours = 1 ou 2 ou X
//On construit l'objet Date
    var date = new Date(date_permis);
//On ajout a la date le nombre de jours d'absence
    date.setTime(date.getTime()+(nb_jour*3600*24*1000));
//On affiche le resultat sur date_retour
    document.getElementById("date_reprise").value = date.toDateString();
}
//On précise a la page d'effectuer le calcul de la date a chaque fois qu'on écris dans date_permission ou nb_jours
document.getElementById('date_permis').onkeyup = calcul_date_reprise;
document.getElementById('nb_jour').onkeyup = calcul_date_reprise;

Garantie sans bug.
Vous pouvez aussi ajouter ceci en debut de script

Code :

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

1
2
3
4
5
6
7
8
9
Date.prototype.toLongFrenchFormat = function (){
	var months = ["janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre"];
	var date = this.getDate();
	if (date < 10){
		date = "0" + date;	
	}
	var output = date + " " + months[this.getMonth()] + " " + this.getFullYear();
	return output;
}

Cela permettra d'afficher la date entierement en francais en appelant la fonction date.toLongFrenchFormat();Après si il y a des modifications a faire, cela devrait être de votre ressort.

Si tout est fini, pensez a mettre le sujet en Résolu !

**aectie** · 16/12/2014, 10h05

Bonjour,
mon code marche parfaitement.
j'ai beaucoup appris.
merci encore

**aectie** · 17/12/2014, 12h05

Rebonjour,
je suis encore la.comment faire pour que la date de permission accepte une date au format DD-MM-YYYY?

Code :

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

var date_permis = document.getElementById("date_permis").value; // var date_permission = YYYY-MM-JJ

affichage d'une date en fonction d'une autre date

Langage PHP

Discussions similaires

Partager

Partager