JavaScript Zeitauswahlbeispiel in HTML

Muhammad Muzammil Hussain 12 Oktober 2023

JavaScript JavaScript Time Picker

Mit JavaScript Time Picker kann der Endbenutzer die Zeit durch direkte Eingabe des Werts oder über ein Popup auswählen. Zeit kann in mehreren Formaten vorhanden sein, und es hängt davon ab, welche Art von Format Sie benötigen.

JavaScript-Zeitauswahlbeispiel in HTML

Hier sehen Sie ein Beispiel für die JavaScript-Methode clockTimePicker(), die Benutzern hilft, einen Zeitwert aus dem Popup-Menü auszuwählen. Die Methode nutzt jQuery-Bibliotheken, um die Zeitoptionen anzuzeigen.

Binden Sie hier im ersten Schritt die folgenden CDNs ein.

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

Im folgenden HTML-Quellcode haben wir die CDNs eingebunden und ein Formularelement mit dem Tag <input> erstellt, indem wir id="timePicker" angegeben und den $('#timePicker').clockTimePicker() mit dem initialisiert haben gleiche Eingabe-ID im script-Tag.

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

In der obigen Seitenquelle HTML sehen Sie ein einfaches Eingabeformular für den Zeittyp, um den ganzzahligen Wert vom Endbenutzer zu erhalten. Wir können weitere Eigenschaften für weitere Anpassungen hinzufügen, indem wir Optionen im Objekt angeben.

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

Stellen Sie hier duration: true die Stundeneinstellungen grösser als 23 ein. Während durationNegative standardmäßig false ist, und wenn sein Wert true ist, ist die Dauer negativ.

Es wirkt sich jedoch nur auf die Einstellungen aus, wenn die Bedingung duration wahr ist. Die Bedingung Präzision erstellt eine Sequenz in Minuten wie Präzision: 5 ermöglicht es Benutzern, Minutenschritte mit 5-Minuten-Differenzwerten auszuwählen (6:05, 6:10, 6:15, 6:20, …). Die Bedingung precision erlaubt nur diese Werte: 1, 5, 10, 15, 30, 60.

Der cancelButton: 'Abbrechen' ist nur für mobile Bildschirme. Mit dieser Schaltfläche können Sie die Zeitumstellung abbrechen.

Hier ist function(newVal, oldVal) der Standardwert von onAdjust. Die Funktion onAdjust arbeitet, wenn sich der Wert ändert.