Discussion :

[clickandgo]

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 :

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

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

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

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

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 :

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

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/

[NoSmoking]

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

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

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 :

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

[clickandgo]

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 :

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

[NoSmoking]

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.

[clickandgo]

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 :

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