{"id":28374,"date":"2021-05-24T09:29:00","date_gmt":"2021-05-24T06:29:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28374"},"modified":"2021-10-18T03:42:31","modified_gmt":"2021-10-18T00:42:31","slug":"jak-zaimplementowac-jquery-datepicker-z-timepicker","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/jak-zaimplementowac-jquery-datepicker-z-timepicker\/","title":{"rendered":"Jak zaimplementowa\u0107 jQuery Datepicker z Timepicker?"},"content":{"rendered":"

Czy chcesz doda\u0107 selektor czasu do istniej\u0105cego selektora daty jQuery UI? Dodaj\u0105c selektor czasu, mo\u017cna wybra\u0107 czas wraz z dat\u0105. W tym artykule poka\u017c\u0119 prosty spos\u00f3b na zaimplementowanie jQuery Datepicker z timepickerem.<\/p>\n

Przechodzimy krok po kroku przez dodanie timepickera do Datepickera jQuery UI. Je\u015bli kto\u015b nie chce pod\u0105\u017ca\u0107 za ka\u017cdym krokiem, mo\u017ce bezpo\u015brednio skopiowa\u0107 ko\u0144cowy kod z ostatniej sekcji tego artyku\u0142u.<\/p>\n

Kiedy zako\u0144czymy nasz\u0105 integracj\u0119, ostateczny datetimepicker b\u0119dzie wygl\u0105da\u0142 nast\u0119puj\u0105co.<\/p>\n

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

Zacznijmy od jQuery UI Datepicker<\/h3>\n

Naszym celem jest dodanie timepickera do jQuery UI Datepicker<\/a>. jQuery Datepicker udost\u0119pnia nam wbudowany kalendarz do wyboru daty. Dodajmy ten selektor dat, korzystaj\u0105c z poni\u017cszego kodu.<\/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
Przejd\u017a do przegl\u0105darki i uruchom powy\u017cszy plik, powiniene\u015b zobaczy\u0107 Datepicker na swojej stronie.<\/p>\n
Zaimplementuj jQuery Datepicker z Time Pickerem<\/h3>\n
W celu dodania selektora czasu u\u017cyj\u0119<\/a> wtyczki Timepicker,<\/a> kt\u00f3ra jest \u0142atwa do zintegrowania z jQuery UI Datepicker.<\/p>\n
Po odwiedzeniu witryny przewi\u0144 w d\u00f3\u0142 do sekcji pobierania i kliknij link CDNJS. Z tego linku skopiuj pliki JS i CSS wtyczki. Oto link CDNJS, kt\u00f3ry otrzymasz z ich strony internetowej<\/a>https:\/\/cdnjs.com\/libraries\/jquery-ui-timepicker-addon<\/a>.<\/p>\n
\"Jak<\/a><\/p>\n
Na stronie CDNJS mo\u017cesz zobaczy\u0107 kilka adres\u00f3w URL dla dodatku timepicker. Skopiuj poni\u017csze 2 linki JS i CSS.<\/p>\n
\"Jak<\/a><\/p>\n
Dla u\u0142atwienia poni\u017cej znajduj\u0105 si\u0119 te linki. U\u017cyj tych link\u00f3w w nast\u0119pnym kroku samouczka.<\/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
Po uzyskaniu wymaganego kodu JS i CSS mo\u017cesz doda\u0107 selektor czasu. To, co musisz zrobi\u0107, to do\u0142\u0105czy\u0107 skopiowane pliki do HTML i zast\u0105pi\u0107 datepicker()<\/code>funkcj\u0119 datetimepicker()<\/code>.<\/p>\n
Nasz ostateczny kod wygl\u0105da nast\u0119puj\u0105co:<\/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
Ot\u00f3\u017c \u200b\u200bto! Teraz, je\u015bli prze\u0142adujesz stron\u0119, powiniene\u015b zobaczy\u0107 na swojej stronie zar\u00f3wno selektor daty, jak i selektor czasu. Prosz\u0119, spr\u00f3buj tego. Chcia\u0142bym us\u0142ysze\u0107 twoje przemy\u015blenia w sekcji komentarzy poni\u017cej.<\/p>\n
Powi\u0105zane artyku\u0142y<\/h4>\n