{"id":24744,"date":"2021-05-24T09:45:00","date_gmt":"2021-05-24T06:45:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24744"},"modified":"2021-10-18T02:39:33","modified_gmt":"2021-10-17T23:39:33","slug":"so-implementieren-sie-jquery-datepicker-mit-timepicker","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/so-implementieren-sie-jquery-datepicker-mit-timepicker\/","title":{"rendered":"So implementieren Sie jQuery Datepicker mit Timepicker"},"content":{"rendered":"

M\u00f6chten Sie dem vorhandenen jQuery-UI-Datumspicker einen Zeitw\u00e4hler hinzuf\u00fcgen? Durch Hinzuf\u00fcgen eines Zeitw\u00e4hlers kann die Uhrzeit zusammen mit dem Datum ausgew\u00e4hlt werden. In diesem Artikel zeige ich Ihnen eine einfache M\u00f6glichkeit, jQuery Datepicker mit einem Timepicker zu implementieren.<\/p>\n

Wir gehen Schritt f\u00fcr Schritt durch das Hinzuf\u00fcgen eines Zeitw\u00e4hlers zum jQuery UI Datepicker. Wenn jemand nicht jeden Schritt befolgen m\u00f6chte, kann er den endg\u00fcltigen Code direkt aus dem letzten Abschnitt dieses Artikels kopieren.<\/p>\n

Wenn wir mit unserer Integration fertig sind, sieht der endg\u00fcltige Datetimepicker wie folgt aus.<\/p>\n

\"So<\/a><\/p>\n

Beginnen wir mit jQuery UI Datepicker<\/h3>\n

Unser Ziel ist es, dem jQuery UI<\/a> Datepicker eine Zeitauswahl hinzuzuf\u00fcgen. jQuery Datepicker bietet uns einen Inline-Kalender zur Auswahl des Datums. F\u00fcgen wir diesen Datepicker mit dem folgenden Code hinzu.<\/p>\n

<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"UTF-8\">\n\u00a0\u00a0\u00a0\u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u00a0\u00a0\u00a0\u00a0<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n\u00a0\u00a0\u00a0\u00a0<title>jQuery Datetimepicker<\/title>\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jqueryui\/1.12.1\/jquery-ui.min.css\" \/>\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<p>Date: <input type=\"text\" id=\"datepicker\"><\/p>\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jqueryui\/1.12.1\/jquery-ui.min.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script>\n\u00a0\u00a0\u00a0\u00a0jQuery(function($) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(\"#datepicker\").datepicker();\n\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0<\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
Gehen Sie zum Browser und f\u00fchren Sie die obige Datei aus. Sie sollten den Datepicker auf Ihrer Seite sehen.<\/p>\n
Implementieren Sie jQuery Datepicker mit Time Picker<\/h3>\n
Um eine Zeitauswahl<\/a> hinzuzuf\u00fcgen, verwende ich das Timepicker-<\/a> Plugin, das sich leicht in jQuery UI Datepicker integrieren l\u00e4sst.<\/p>\n
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 erhalten<\/a>https:\/\/cdnjs.com\/libraries\/jquery-ui-timepicker-addon<\/a>.<\/p>\n
\"So<\/a><\/p>\n
Auf der CDNJS-Website sehen Sie m\u00f6glicherweise die verschiedenen URLs f\u00fcr das Timepicker-Addon. Kopieren Sie die folgenden 2 Links von JS und CSS.<\/p>\n
\"So<\/a><\/p>\n
Um es einfach zu machen, unten sind diese Links. Verwenden Sie diese Links im n\u00e4chsten Schritt des Tutorials.<\/p>\n
https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery-ui-timepicker-addon\/1.6.3\/jquery-ui-timepicker-addon.min.css\nhttps:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery-ui-timepicker-addon\/1.6.3\/jquery-ui-timepicker-addon.min.js<\/code><\/pre>\n
Sobald Sie das erforderliche JS und CSS erhalten haben, k\u00f6nnen Sie einen Zeitw\u00e4hler hinzuf\u00fcgen. Was Sie tun m\u00fcssen, ist, die kopierten Dateien in HTML einzubinden und die datepicker()<\/code>Funktion durch zu ersetzen datetimepicker()<\/code>.<\/p>\n
Unser endg\u00fcltiger Code lautet wie folgt:<\/p>\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"UTF-8\">\n\u00a0\u00a0\u00a0\u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u00a0\u00a0\u00a0\u00a0<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n\u00a0\u00a0\u00a0\u00a0<title>jQuery Datetimepicker<\/title>\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jqueryui\/1.12.1\/jquery-ui.min.css\" \/>\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery-ui-timepicker-addon\/1.6.3\/jquery-ui-timepicker-addon.min.css\" \/>\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<p>Date: <input type=\"text\" id=\"datepicker\"><\/p>\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.4.1\/jquery.min.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jqueryui\/1.12.1\/jquery-ui.min.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery-ui-timepicker-addon\/1.6.3\/jquery-ui-timepicker-addon.min.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script>\n\u00a0\u00a0\u00a0\u00a0jQuery(function($) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(\"#datepicker\").datetimepicker();\n\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0<\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
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\u00fcrde gerne Ihre Meinung im Kommentarbereich unten h\u00f6ren.<\/p>\n
Zum Thema passende Artikel<\/h4>\n