suchen

Heim >Web-Frontend >Front-End-Fragen und Antworten >So wählen Sie die Zeitsteuerung mit jquery aus

So wählen Sie die Zeitsteuerung mit jquery aus

WBOY
WBOYOriginal
2023-05-23 20:47:062105Durchsuche

Mit der Entwicklung des Internets werden Zeitauswahlsteuerungen in der Webentwicklung immer häufiger verwendet. Unter anderem bietet das jQuery-Zeitauswahl-Plug-in offensichtliche Vorteile in Bezug auf einfache Bedienung und schöne Effekte und wird von Entwicklern allgemein begrüßt und unterstützt. In diesem Artikel wird erläutert, wie Sie das jQuery-Zeitauswahl-Plug-in verwenden, um Entwicklern dabei zu helfen, Zeitauswahlsteuerungen schneller und einfacher zu implementieren.

1. Einführung in das jQuery-Zeitauswahl-Plug-in

jQuery-Zeitauswahl-Plug-in ist ein schnelles, flexibles, browserübergreifendes Datums- und Zeitauswahl-Plug-in, das darauf angewiesen ist in der jQuery-Bibliothek zeichnet sich durch einen adaptiven, leicht erweiterbaren und schönen Stil aus. Es ist einfach zu verwenden, unterstützt mehrere Sprachen, kann in hohem Maße angepasst werden und bietet umfangreiche Rückruffunktionen für Ereignisse. Entwickler müssen lediglich relevante JS- und CSS-Dateien einführen und diese einfach aufrufen, um die Zeitauswahlsteuerung zu implementieren. Derzeit gibt es mehrere Versionen des jQuery-Zeitauswahl-Plug-Ins. Dieser Artikel bezieht sich auf das Plug-In mit der Versionsnummer 2.1.9.

2. Verwendung des jQuery-Zeitauswahl-Plug-ins

  1. Zugehörige Dateien vorstellen

Zuallererst Sie Sie müssen die HTML-Datei hinzufügen. Führen Sie die mit dem jQuery-Bibliotheks- und jQuery-Zeitauswahl-Plug-in verbundenen JS- und CSS-Dateien im Head-Tag ein. 

<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery-timepicker/2.1.9/jquery.timepicker.min.js"></script>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-timepicker/2.1.9/jquery.timepicker.min.css">
</head>
  1. HTML-Seitenlayout

Fügen Sie als Nächstes ein Eingabe-Tag zur Seite als Container für die Zeitauswahl hinzu. 

<input type="text" class="timepicker" />

Unter diesen ist der Klassenattributwert Timepicker, was darauf hinweist, dass es sich bei diesem Eingabe-Tag um einen Zeitpicker handelt.

  1. Initialisieren Sie das Plug-in.

Rufen Sie die timepicker()-Methode des jQuery-Zeitauswahl-Plug-ins auf, um die Zeitauswahl zu initialisieren. 

$(document).ready(function() {
  $('.timepicker').timepicker();
});

Die Methode ready() wird verwendet, um sicherzustellen, dass das Dokument vollständig geladen wurde, bevor der JavaScript-Code ausgeführt wird. Die Methode timepicker() wird zum Initialisieren des Zeitwählers verwendet, der über verschiedene optionale Parameter verfügt und stark angepasst werden kann.

  1. Erweiterte Funktionsnutzung

Zusätzlich zur grundlegenden Zeitauswahl bietet das jQuery-Zeitauswahl-Plugin auch viele erweiterte Funktionen, wie z. B. das Festlegen des Zeitformats , Minutenintervalle festlegen, Zeitlimits hinzufügen, Sprachen ändern und mehr. Im Folgenden wird jeweils die Implementierung dieser gemeinsamen Funktionen vorgestellt.

(1) Legen Sie das Zeitformat fest.

Durch Festlegen des Formatattributs können Sie das Format der Zeitauswahl festlegen. Zu den Formatierungsoptionen können Datumsformat, Zeitformat und Anfangszeit gehören (wenn Sie die Anfangszeit anzeigen möchten, müssen Sie die entsprechende Zeit einstellen). 

$(function() {
  $("#timepicker").timepicker({
    timeFormat: "HH:mm:ss",
    dateFormat: "yy-mm-dd",
    dateTimeFormat: "yy-mm-dd HH:mm:ss",
    initialValue: "09:00"
  });
});

Der obige Code setzt das Zeitformat des Zeitselektors auf „HH:mm:ss“, das Datumsformat auf „jj-mm-tt“ und das Datum-Uhrzeit-Format auf „jj- mm-dd HH“ :mm:ss“, die Anfangszeit ist „09:00“.

(2) Minutenintervall einstellen

Durch Festlegen des Schrittattributs können Sie das Minuten- und Sekundenintervall des Zeitwählers festlegen, am Beispiel von 15 Minuten: #🎜 🎜#

$(function() {
  $("#timepicker").timepicker({
    step: 15 * 60  // 单位为秒
  });
});
# 🎜🎜#Der obige Code setzt das Minutenintervall des Zeitwählers auf 15 Minuten.

(3) Zeitlimit hinzufügen

Durch Festlegen der Attribute minTime und maxTime können Sie den Zeitbereich des Zeitselektors begrenzen, indem Sie 9:00 bis 17:00 als nehmen ein Beispiel: # 🎜🎜#

$(function() {
  $("#timepicker").timepicker({
    minTime: "9:00",
    maxTime: "17:00"
  });
});

Der obige Code setzt die früheste Zeit des Zeitselektors auf 9:00 und die späteste Zeit auf 17:00.

(4) Sprache ändern

Durch Festlegen des Sprachpakets können Sie die Sprache der Zeitauswahl ändern. 

$(function() {
  $("#timepicker").timepicker({
    timeFormat: "HH:mm",
    lang: "zh"
  });
});

Der obige Code setzt das Zeitformat des Zeitselektors auf „HH:mm“ und die Sprache auf Chinesisch.

3. Zusammenfassung

In diesem Artikel wird erläutert, wie Sie mit dem jQuery-Zeitauswahl-Plug-in eine Zeitauswahlsteuerung implementieren. Durch die Einführung relevanter Dateien, das Hinzufügen eines HTML-Seitenlayouts und die Initialisierung des Plug-Ins können Sie schnell eine schöne und praktische Zeitauswahl erstellen. Darüber hinaus kann die Zeitauswahl weiter angepasst werden, indem erweiterte Funktionen wie Zeitformat, Minutenintervalle, Zeitlimits und Sprachpakete festgelegt werden. Daher ist das Erlernen der Verwendung des jQuery-Zeitauswahl-Plug-Ins für Entwickler, die Zeitauswahlprogramme entwickeln, eine sehr notwendige Fähigkeit.

Das obige ist der detaillierte Inhalt vonSo wählen Sie die Zeitsteuerung mit jquery aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie schreibe ich ein if-Urteil in nodejs?Nächster Artikel：Wie schreibe ich ein if-Urteil in nodejs?

In Verbindung stehende Artikel

Mehr sehen