Soustraire une date d'un élément calendrier

Version imprimable

21/02/2020, 23h59
Marcopololo

Soustraire une date d'un élément calendrier
Bonjour,

J'ai réussi à créer une fonction qui recopie une date d'une zone calendrier vers une autre zone calendrier. Mais je voudrais en plus soustraire 42 jours à cette date.
Code:

1 2 3 4 5 6 <script type="text/javascript"> function changeVal(){ document.getElementById("Date debut inscriptions").value=document.getElementById("Date").value; } </script>
J'ai essayé de mettre .addDays(-42) derrière value mais cela ne fonctionne pas.

J'ai une idée mais je ne sais pas comment l'appliquer, je pense qu'il faut avant que je travaille sur une variable plutôt qu'un objet ?

Merci d'avance de votre aide.

Marc G.

J'ai essayé cela mais cela ne fonctionne pas :

Code:

1
2
3
4
5
6
7
8
9
 
<script type="text/javascript">
function dateMoins() {
  var datecomp = document.getElementById("Date").value;
var dateinscr = document.getElementById("Date").value;
dateinscr.setDate(datecomp.getDate()-42);
  document.getElementById("Date debut inscriptions").value=dateinscr;
}
</script>

23/02/2020, 05h24
Toufik83

Salut,

Pour convertir les dates c'est un peu compliquer, essaies d'utiliser moment.js (traduis la page en français si tu n'es pas a l'aise avec l'anglais).

A toi de chsoir LES METHODES qui te convient.

Si tu es bloqué quelque part, n'hésite pas de poser tes questions....
23/02/2020, 08h37
NoSmoking

Bonjour,
peut-être devrais-tu commencer par regarder ce que tu peux faire avec un objet Date.

Tu pourrais, mais c'est peut-être déjà le cas, utiliser des <input type="date">.

Salut,

ptit exemple:

- choix dans une plage de dates en cliquant;
- la date que tu veux apparaît dans l'input;

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>...</title>
 
<style>
ul {overflow:auto;height:200px;width:150px;}
</style>
</head>
<body>
 
<div id="cadre"></div>
 
<div>
	<span>deuxième date (-42 jours) </span>
	<input type="text" maxlength="10" readonly id="date2" />
</div>
 
<script>
const ul=document.createElement("ul");
const li=document.createElement("li");
document.getElementById("cadre").appendChild(ul);
for(let i=1;i<29;i++){
        const d=new Date(2020,1,i);
        let li2=li.cloneNode();
        li2.textContent=
        new Intl.DateTimeFormat(undefined, {day:"2-digit",month:"2-digit",year:"numeric"}).format(d);
        ul.appendChild(li2);
        li2.addEventListener("click",(e)=>{
                const d2=new Date(d -(1000*3600*24*42));
                document.getElementById("date2").value=
                new Intl.DateTimeFormat(undefined, {day:"2-digit",month:"2-digit",year:"numeric"}).format(d2);
        })
}
 
</script>
</body>
</html>

24/02/2020, 08h55
Marcopololo

Je vais regardé, j'avais espéré plus simple au niveau de la soustraction des jours mais je vais creuser.
Merci et je ne doute pas que j'aurai d'autres questions

:salut:

Pour manipuler des dates et avoir confiance dans la validité du résultat, il existe moment.js qui vous à déjà été recommandé au message n° 3 par @Toufik83

Exemple d'utilisation :
Code:

1 2 <script defer src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script> <script defer src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/fr.js"></script>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 window.addEventListener('load', ev => { // le DOM est construit et la page web est visible // début code du test moment.locale('fr'); let ce_jour = moment(); let ancien_jour = ce_jour.subtract(10, "days"); console.log(ancien_jour.format("DD-MM-YYYY")); // 14-02-2020 // fin code du test }, { capture: false, passive: true, once: false });
Deuxième exemple d'utilisation :

Compte à rebours (countdown)

Troisième exemple d'utilisation :

Modifier une date en fonction d'une autre date, voir le code JS de l'exemple : https://danielhagnoul.developpez.com/Site/QR20180331-1/

24/02/2020, 11h00
SpaceFrog

Je ne saurais trop que plussoyer Daniel et Toufik. la librairie moments.js est une garantie pour la manipulation des dates.

Citation:

la librairie moments.js est une garantie pour la manipulation des dates

Bien d'accord sur ce point mais pas toujours nécessaire

Code:

1
2
<p><label>Date réf.</label><input id="date-ref" type="date"></p>
<p><label>Date fin</label>  <input id="date-fin" type="date"></p>

et rien de bien complexe avec des <input type="date">

Code:

1
2
3
4
5
6
7
8
9
10
11
12
const inputsDate = document.querySelectorAll('input[type="date"');
const inputRef = inputsDate[0];
const inputFin = inputsDate[1];
const ECART = -42;
 
function calculNewDate() {
  let dateRef = inputRef.valueAsDate;
  let dateNew = new Date(dateRef);
  dateNew.setDate(dateNew.getDate() + ECART);
  inputFin.valueAsDate = dateNew;
}
inputRef.addEventListener( "change", calculNewDate);

25/02/2020, 00h52
Marcopololo

Merci de toutes ces informations. Je vais regarder pour adapter et je vous tiendrai informés.

Marc G.