Soustraire une date d'un élément calendrier

**Marcopololo** · 21/02/2020, 23h59

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 javascript :

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

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.

**Marcopololo** · 22/02/2020, 12h20

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

Code Javascript :

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

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>

**Toufik83** · 23/02/2020, 05h24

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....

**NoSmoking** · 23/02/2020, 08h37

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">.

**javatwister** · 23/02/2020, 10h00

Salut,

ptit exemple:

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

Code html :

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
<!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>

**Marcopololo** · 24/02/2020, 08h55

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

**danielhagnoul** · 24/02/2020, 10h54

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 HTML :

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

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 JavaScript :

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
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/

**SpaceFrog** · 24/02/2020, 11h00

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

**NoSmoking** · 24/02/2020, 14h42

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

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

Code html :

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

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 :

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

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);

**Marcopololo** · 25/02/2020, 00h52

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

Marc G.

Soustraire une date d'un élément calendrier

JavaScript

Discussions similaires

Partager

Partager