Exemple de sélecteur de temps JavaScript en HTML

Muhammad Muzammil Hussain 12 octobre 2023

JavaScript JavaScript Time Picker

JavaScript Time Picker permet à l’utilisateur final de sélectionner l’heure en saisissant directement la valeur ou à partir d’une fenêtre contextuelle. Le temps peut être présent dans plusieurs formats, et cela dépend du type de format dont vous avez besoin.

Exemple de sélecteur de temps JavaScript en HTML

Ici, vous pouvez voir un exemple de la méthode clockTimePicker() de JavaScript, qui aide les utilisateurs à sélectionner une valeur de temps dans le menu contextuel. La méthode prend l’aide des bibliothèques jQuery pour afficher les options de temps.

Ici, dans la première étape, incluez les CDN suivants.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/md-date-time-picker@2.3.0/dist/css/mdDateTimePicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-clock-timepicker@2.5.0/jquery-clock-timepicker.min.js"></script>

Le code source HTML suivant, nous avons inclus les CDN et créé un élément de formulaire avec la balise <input> en donnant id="timePicker", et initialisé le $('#timePicker').clockTimePicker() avec le même ID d’entrée dans la balise script.

<!doctype html>
<html lang="en">
  <head>
    <title>Time Picker</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/md-date-time-picker@2.3.0/dist/css/mdDateTimePicker.min.css">
  </head>
  <body>
  <form>
     <input type="text" id="timePicker">
  </form>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-clock-timepicker@2.5.0/jquery-clock-timepicker.min.js"></script>
<script>
  $('#timePicker').clockTimePicker();
</script>
</body>
</html>

Dans la source de page HTML ci-dessus, vous pouvez voir un simple type de formulaire de saisie de temps pour obtenir la valeur entière de l’utilisateur final. Nous pouvons inclure plus de propriétés pour une personnalisation plus poussée en donnant des options dans l’objet.

$('#timePicker').clockTimePicker({
  duration: true,
  durationNegative: true,
  precision: 5,
  i18n: {cancelButton: 'Abbrechen'},
  onAdjust: function(newVal, oldVal) {
    //...
  }
});

Ici durée : true, définissez les paramètres d’heures supérieurs à 23. Alors que durationNegative est par défaut false, et si sa valeur est true, la durée sera négative.

Néanmoins, cela n’affecte les paramètres que lorsque la condition duration est vraie. La condition precision crée une séquence en minutes comme precision: 5 permet aux utilisateurs de sélectionner des pas de minutes avec des valeurs de différence de 5 minutes (6:05, 6:10, 6:15, 6:20, …). La condition precision n’autorise que ces valeurs : 1, 5, 10, 15, 30, 60.

Le cancelButton: 'Abbrechen' est uniquement pour les écrans mobiles. A l’aide de ce bouton, vous pouvez annuler le changement d’heure.

Ici function(newVal, oldVal) est la valeur par défaut de onAdjust. La fonction onAdjust fonctionne lorsque la valeur change.