Augmenter / diminuer un horaire et réinjecter dans un champ

Version imprimable

Bonjour à tous,

1/ Pourriez-vous me dire quelle est la méthode pour injecter dans mon champ de type "time" le résultat de la fonction suivante (qui marche...) car l'injection dans le champ ne se fait pas malgré que j'ai le bon résultat dans le console.log, le laissant vide :
(Je suppose qu'il faut reformatter le résultat ? mon champ étant de type "08:00")
Code:

1 2 3 4 5 6 7 const dateActive = jourDebut.value + " " + heureDebut.value; let newDate = new Date(dateActive); let newDatePlus15 = new Date( newDate.setMinutes(newDate.getMinutes() + 15) ); heureFin.value = newDatePlus15; console.log(newDatePlus15.toLocaleTimeString());
2/ Je voudrais que la valeur s'incrémente à chaque pulsation sur le bouton d'ajout de 15 minutes, j'ai essayé en mettant un "+=" mais cela ne cumule pas, comment faire ?

Merci d'avance

16/11/2023, 16h18
Pytet
Bonjour,

Penses à partager le code html afin de pouvoir tester ton code plus facilement.

Il faut effectivement formatter le résultat, l'input type time attend par défaut une valeur au format "HH:mm" :

Code:

heureFin.value = ('0' + dateFin.getHours()).slice(-2) + ':' + ('0' + dateFin.getMinutes()).slice(-2);

L'instruction ('0' + m).slice(-2) permet d'éviter les erreurs de format si le nombre de minute ou heure est inférieur à 10 : ("01:05" au lieu de "1:5" par exemple)

Pas sûr que ce soit la meilleure approche.
Une solution qui semble meilleure serait l'utilisation de l'attribut valueAsDate à la place de l'attribut value pour définir la valeur de l'input directement avec l'objet js Date :
Code:

1 2 let dateFin = new Date(); heureFin.valueAsDate = dateFin;
Néanmoins je rencontre aussi le problème d'affichage dans l'input si le le nombre de minute ou heure est inférieur à 10 avec l'attribut valueAsDate.

Pour tester : https://jsfiddle.net/862s9g1d/

Bonjour,
on peut faire plus simple en passant par la propriété valueAsNumber de l'<input type="time">.

On peut également compléter le champ en utilisant, par exemple, la méthode toLocaleString.

Sur base du HTML suivant :

Code:

1
2
3
4
5
<p>
  <button id="dec-time">- 15 mn</button>
  <input type="time">
  <button id="inc-time">+ 15 mn</button>
</p>

on peut utiliser le script suivant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const MS_15_MINUTES = 15 * 60 * 1000;
const elemTime = document.querySelector("[type='time']");
const nowTime = new Date().toLocaleString("fr-FR",{
  hour: "numeric",
  minute: "numeric",
});
elemTime.value = nowTime;
 
document.getElementById("inc-time")
  .addEventListener("click", () => {
    elemTime.valueAsNumber += MS_15_MINUTES;
  });
document.getElementById("dec-time")
  .addEventListener("click", () => {
    elemTime.valueAsNumber -= MS_15_MINUTES;
  });

Merci à tous les deux pour vos efforts

Grâce à vos conseils j'ai pu re factoriser le code et ça marche excepté qu'il y a un soucis de locale apparemment à moins qu'il faille changer la multiplication puisque l'heure de fin se voit ajouter une heure supplémentaire dans le calcul de la nouvelle valeur sans raison apparente...

Savez-vous comment l'on procède avec Symfony et JS ?

Merci

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
40
41
42
43
44
45
46
47
48
49
50
 switch (e.target.id) {
          case "btnMoins60":
            if (duree.valueAsNumber >= 75) {
              duree.valueAsNumber -= 60;
              diminuerMinutes();
            }
            break;
          case "btnMoins15":
            if (duree.valueAsNumber >= 30) {
              duree.valueAsNumber -= 15;
              diminuerMinutes();
            }
            break;
          case "btnPlus15":
            duree.valueAsNumber += 15;
            augmenterMinutes();
            break;
          case "btnPlus60":
            duree.valueAsNumber += 60;
            augmenterMinutes();
            break;
          default:
            return;
        }
      }
    });
  });
  //Ajouter des minutes à l'heure de fin
  const augmenterMinutes = () => {
    //Ajout de minutes au champ heure de fin
    let minutes = duree.valueAsNumber * 60 * 1000;
    console.log(minutes);
    let newTime = new Date(heureDebut.valueAsDate).toLocaleString("fr-FR", {
      hour: "numeric",
      minute: "numeric",
    });
    heureFin.value = newTime;
    heureFin.valueAsNumber += minutes;
  };
  const diminuerMinutes = () => {
    //Ajout de minutes au champ heure de fin
    let minutes = duree.valueAsNumber * 60 * 1000;
    console.log(minutes);
    let newTime = new Date(heureDebut.valueAsDate).toLocaleString("fr-FR", {
      hour: "numeric",
      minute: "numeric",
    });
    heureFin.value = newTime;
    heureFin.valueAsNumber -= minutes;
  };

21/11/2023, 18h48
NoSmoking

Citation:

qu'il y a un soucis de locale apparemment à moins qu'il faille changer la multiplication puisque l'heure de fin se voit ajouter une heure supplémentaire dans le calcul de la nouvelle valeur sans raison apparente...

pas tout compris, peut-être devrais-tu nous donner la structure HTML que tu utilises et nous dire plus précisément ce que tu souhaites obtenir comme résultat.

Plutôt que de charger de code mon message je vais détailler rapidement ici :

J'ai 3 champs :

- Heure début: TimeType
- Heure fin: TimeType
- Durée: IntegerType

La fonction ci dessous actualise le champ durée puis augmente ou diminue le champ heureFin grâce aux 2 fonctions filles.

L'incrémentation / décrémentation se fait bien dans le champ Durée et heureFin mais ce dernier ajoute une heure en plus alors que la durée est correctement calculée, je ne peux donc que penser qu'il y a un problème de fuseau quelque part ?

Si par exemple l'heure de début est 8:00 et que j'augmente de 15 minutes mon champ durée augmente bien de 15 mais j'obtiens 9:15 dans le champ heureFin au lieu de 8:15 !

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
window.onload = () => {
  const btnsDuree = document.querySelectorAll(".btn-duree");
  const jourDebut = document.querySelector("#rendez_vous_jour_debut");
  const duree = document.querySelector("#rendez_vous_duree");
  const etat = document.querySelector("#rendez_vous_etat_rdv");
  const heureFin = document.querySelector("#rendez_vous_heure_fin");
  const heureDebut = document.querySelector("#rendez_vous_heure_debut");
  const HoraireDebut = heureDebut.value;
 
  btnsDuree.forEach((btn) => {
    btn.addEventListener("click", (e) => {
      e.preventDefault();
      //Contrôle des champs heures et dates
      if (
        etat.options[etat.selectedIndex].text == "Annulé" ||
        etat.options[etat.selectedIndex].text == "Reporté" ||
        etat.options[etat.selectedIndex].text == "Honoré"
      ) {
        alert(
          "L'état " +
            etat.options[etat.selectedIndex].text +
            " ne permet pas l'édition du rendez-vous actif."
        );
      } else {
        switch (e.target.id) {
          case "btnMoins60":
            if (duree.valueAsNumber >= 75) {
              duree.valueAsNumber -= 60;
              diminuerMinutes();
            }
            break;
          case "btnMoins15":
            if (duree.valueAsNumber >= 30) {
              duree.valueAsNumber -= 15;
              diminuerMinutes();
            }
            break;
          case "btnPlus15":
            duree.valueAsNumber += 15;
            augmenterMinutes();
            break;
          case "btnPlus60":
            duree.valueAsNumber += 60;
            augmenterMinutes();
            break;
          default:
            return;
        }
      }
    });
  });
  //Ajouter des minutes à l'heure de fin
  const augmenterMinutes = () => {
    //Ajout de minutes au champ heure de fin
    let minutes = duree.valueAsNumber * 60 * 1000;
    console.log(minutes);
    let newTime = new Date(heureDebut.valueAsDate).toLocaleString("fr-FR", {
      hour: "numeric",
      minute: "numeric",
    });
    heureFin.value = newTime;
    heureFin.valueAsNumber += minutes;
  };
  const diminuerMinutes = () => {
    //Ajout de minutes au champ heure de fin
    let minutes = duree.valueAsNumber * 60 * 1000;
    console.log(minutes);
    let newTime = new Date(heureDebut.valueAsDate).toLocaleString("fr-FR", {
      hour: "numeric",
      minute: "numeric",
    });
    heureFin.value = newTime;
    heureFin.valueAsNumber -= minutes;
  };
};

Citation:

je ne peux donc que penser qu'il y a un problème de fuseau quelque part ?

et comme tu as raison ;)

Il te faut déclarer l'option timeZome à "UTC" pour utiliser le même fuseau que ta date de départ.

Code:

1
2
3
4
5
let newTime = new Date(heureDebut.valueAsDate).toLocaleString("fr-FR", {
  timeZone: 'UTC',
  hour: "numeric",
  minute: "numeric",
});

Néanmoins, tu peux faire plus simple en n'utilisant que les propriétés valueAsNumber de tes champs.

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
const MS_15_MINUTES = 15 * 60 * 1000;
const MS_60_MINUTES = 60 * 60 * 1000;
 
function updateDuree(e) {
  let increment = 0;
  switch (e.target.id) {
    case "btn-inc-time-15":
      increment = MS_15_MINUTES;
      break;
    case "btn-inc-time-60":
      increment = MS_60_MINUTES;
      break;
    case "btn-dec-time-15":
      increment = -MS_15_MINUTES;
      break;
    case "btn-dec-time-60":
      increment = -MS_60_MINUTES;
      break;
  }
  // bornage valeur
  let duree = Math.max(dureeTrajet.valueAsNumber + increment, 0);
  // mise à jour des champs
  heureFin.valueAsNumber = heureDebut.valueAsNumber + duree;
  dureeTrajet.valueAsNumber = duree;
}

22/11/2023, 13h27
clickandgo

Un grand merci à toi NoSmoking

Bravo pour la re-factorisation !