...
✅ WEB- und WordPress-Nachrichten, Themen, Plugins. Hier teilen wir Tipps und beste Website-Lösungen.

So implementieren Sie jQuery Datepicker mit Timepicker

389

Möchten Sie dem vorhandenen jQuery-UI-Datumspicker einen Zeitwähler hinzufügen? Durch Hinzufügen eines Zeitwählers kann die Uhrzeit zusammen mit dem Datum ausgewählt werden. In diesem Artikel zeige ich Ihnen eine einfache Möglichkeit, jQuery Datepicker mit einem Timepicker zu implementieren.

Wir gehen Schritt für Schritt durch das Hinzufügen eines Zeitwählers zum jQuery UI Datepicker. Wenn jemand nicht jeden Schritt befolgen möchte, kann er den endgültigen Code direkt aus dem letzten Abschnitt dieses Artikels kopieren.

Wenn wir mit unserer Integration fertig sind, sieht der endgültige Datetimepicker wie folgt aus.

So implementieren Sie jQuery Datepicker mit Timepicker

Beginnen wir mit jQuery UI Datepicker

Unser Ziel ist es, dem jQuery UI Datepicker eine Zeitauswahl hinzuzufügen. jQuery Datepicker bietet uns einen Inline-Kalender zur Auswahl des Datums. Fügen wir diesen Datepicker mit dem folgenden Code hinzu.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery Datetimepicker</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
</head>
<body>
    <p>Date: <input type="text" id="datepicker"></p>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script>
    jQuery(function($) {
        $("#datepicker").datepicker();
    });
  </script>
</body>
</html>

Gehen Sie zum Browser und führen Sie die obige Datei aus. Sie sollten den Datepicker auf Ihrer Seite sehen.

Implementieren Sie jQuery Datepicker mit Time Picker

Um eine Zeitauswahl hinzuzufügen, verwende ich das Timepicker- Plugin, das sich leicht in jQuery UI Datepicker integrieren lässt.

Sobald Sie die Website besucht haben, scrollen Sie nach unten zum Download-Bereich und klicken Sie auf den CDNJS-Link. Kopieren Sie von diesem Link die JS- und CSS-Dateien des Plugins. Hier ist der CDNJS-Link, den Sie von ihrer Website erhaltenhttps://cdnjs.com/libraries/jquery-ui-timepicker-addon.

So implementieren Sie jQuery Datepicker mit Timepicker

Auf der CDNJS-Website sehen Sie möglicherweise die verschiedenen URLs für das Timepicker-Addon. Kopieren Sie die folgenden 2 Links von JS und CSS.

So implementieren Sie jQuery Datepicker mit Timepicker

Um es einfach zu machen, unten sind diese Links. Verwenden Sie diese Links im nächsten Schritt des Tutorials.

https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.css
https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.js

Sobald Sie das erforderliche JS und CSS erhalten haben, können Sie einen Zeitwähler hinzufügen. Was Sie tun müssen, ist, die kopierten Dateien in HTML einzubinden und die datepicker()Funktion durch zu ersetzen datetimepicker().

Unser endgültiger Code lautet wie folgt:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery Datetimepicker</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.css" />
</head>
<body>
    <p>Date: <input type="text" id="datepicker"></p>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.js"></script>
    <script>
    jQuery(function($) {
        $("#datepicker").datetimepicker();
    });
  </script>
</body>
</html>

Das ist es! Wenn Sie nun die Seite neu laden, sollten Sie sowohl die Datumsauswahl als auch die Zeitauswahl auf Ihrer Seite sehen. Bitte mach weiter und probiere es aus. Ich würde gerne Ihre Meinung im Kommentarbereich unten hören.

Zum Thema passende Artikel

Aufnahmequelle: artisansweb.net

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen