{"id":24750,"date":"2021-05-24T09:20:00","date_gmt":"2021-05-24T06:20:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24750"},"modified":"2021-10-17T20:42:41","modified_gmt":"2021-10-17T17:42:41","slug":"kuinka-toteuttaa-jquery-datepicker-timepickerilla","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/kuinka-toteuttaa-jquery-datepicker-timepickerilla\/","title":{"rendered":"Kuinka toteuttaa jQuery Datepicker Timepickerill\u00e4"},"content":{"rendered":"

Haluatko lis\u00e4t\u00e4 ajanoton nykyiseen jQuery UI Datepickeriin? Lis\u00e4\u00e4m\u00e4ll\u00e4 ajastin voidaan valita aika ja p\u00e4iv\u00e4m\u00e4\u00e4r\u00e4. T\u00e4ss\u00e4 artikkelissa n\u00e4yt\u00e4n sinulle yksinkertaisen tavan toteuttaa jQuery Datepicker ajastimen avulla.<\/p>\n

Olemme menossa l\u00e4pi vaihe vaiheelta lis\u00e4\u00e4m\u00e4ll\u00e4 ajanvalitsimen jQuery UI Datepickeriin. Jos joku ei halua seurata kutakin vaihetta, h\u00e4n voi kopioida lopullisen koodin t\u00e4m\u00e4n artikkelin viimeisest\u00e4 osasta.<\/p>\n

Kun lopetamme integroimisen, lopullinen p\u00e4iv\u00e4m\u00e4\u00e4r\u00e4valitsin n\u00e4ytt\u00e4\u00e4 seuraavalta.<\/p>\n

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

Aloitetaan jQuery UI Datepickerill\u00e4<\/h3>\n

Tavoitteenamme on lis\u00e4t\u00e4 ajastin jQuery UI Datepickeriin<\/a>. jQuery Datepicker tarjoaa meille kalenterin p\u00e4iv\u00e4m\u00e4\u00e4r\u00e4n valitsemiseksi. Lis\u00e4t\u00e4\u00e4n t\u00e4m\u00e4 datepicker k\u00e4ytt\u00e4m\u00e4ll\u00e4 alla olevaa koodia.<\/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
Mene selaimeen ja suorita yll\u00e4 oleva tiedosto, sinun pit\u00e4isi n\u00e4hd\u00e4 sivullasi Datepicker.<\/p>\n
Toteuta jQuery Datepicker Time Picker -ohjelmalla<\/h3>\n
Ajanvalitsimen lis\u00e4\u00e4miseksi<\/a> k\u00e4yt\u00e4n Timepicker-<\/a> laajennusta, joka on helppo integroida jQuery UI Datepickeriin.<\/p>\n
Kun olet k\u00e4ynyt verkkosivustolla, vierit\u00e4 alas latausosioon ja napsauta CDNJS-linkki\u00e4. Kopioi t\u00e4st\u00e4 linkist\u00e4 laajennuksen JS- ja CSS-tiedostot. T\u00e4ss\u00e4 on CDNJS-linkki, jonka saat heid\u00e4n verkkosivustoltaan<\/a>https:\/\/cdnjs.com\/libraries\/jquery-ui-timepicker-addon<\/a>.<\/p>\n
\"Kuinka<\/a><\/p>\n
CDNJS-verkkosivustolla saatat n\u00e4hd\u00e4 useita ajastimen lis\u00e4osan URL-osoitteita. Kopioi JS: n ja CSS: n alla olevat 2 linkki\u00e4.<\/p>\n
\"Kuinka<\/a><\/p>\n
Vain helpottamiseksi, alla on linkkej\u00e4. K\u00e4yt\u00e4 n\u00e4it\u00e4 linkkej\u00e4 opetusohjelman seuraavassa vaiheessa.<\/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
Kun olet saanut tarvittavan JS: n ja CSS: n, olet valmis lis\u00e4\u00e4m\u00e4\u00e4n ajastimen. Sinun on lis\u00e4tt\u00e4v\u00e4 kopioidut tiedostot HTML-muotoon ja korvattava datepicker()<\/code>toiminto datetimepicker()<\/code>.<\/p>\n
Lopullinen koodi on seuraava:<\/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
Se siit\u00e4! Jos lataat sivun uudelleen, sinun pit\u00e4isi n\u00e4hd\u00e4 sek\u00e4 datepicker ett\u00e4 timepicker sivullasi. Ole hyv\u00e4 ja kokeile sit\u00e4. Haluaisin kuulla ajatuksesi alla olevassa kommenttiosassa.<\/p>\n
Aiheeseen liittyv\u00e4t artikkelit<\/h4>\n