{"id":28548,"date":"2021-05-24T09:42:00","date_gmt":"2021-05-24T06:42:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28548"},"modified":"2021-10-17T04:41:17","modified_gmt":"2021-10-17T01:41:17","slug":"hur-man-implementerar-jquery-datepicker-med-timepicker","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/hur-man-implementerar-jquery-datepicker-med-timepicker\/","title":{"rendered":"Hur man implementerar jQuery Datepicker med Timepicker"},"content":{"rendered":"

Vill du l\u00e4gga till en tidspickare till den befintliga jQuery UI-datapickern? Genom att l\u00e4gga till en timepicker kan man v\u00e4lja tid tillsammans med datum. I den h\u00e4r artikeln visar jag dig ett enkelt s\u00e4tt att implementera jQuery Datepicker med en timepicker.<\/p>\n

Vi g\u00e5r steg f\u00f6r steg igenom att l\u00e4gga till en timepicker till jQuery UI Datepicker. Om n\u00e5gon inte vill f\u00f6lja varje steg kan de direkt kopiera den slutliga koden fr\u00e5n den sista delen av den h\u00e4r artikeln.<\/p>\n

N\u00e4r vi \u00e4r f\u00e4rdiga med v\u00e5r integration kommer den slutliga datatimepickern att se ut enligt f\u00f6ljande.<\/p>\n

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

L\u00e5t oss b\u00f6rja med jQuery UI Datepicker<\/h3>\n

V\u00e5rt m\u00e5l \u00e4r att l\u00e4gga till en timepicker till jQuery UI Datepicker<\/a>. jQuery Datepicker ger oss en inbyggd kalender f\u00f6r att v\u00e4lja datum. L\u00e5t oss l\u00e4gga till den h\u00e4r datapickern genom att anv\u00e4nda koden nedan.<\/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
G\u00e5 till webbl\u00e4saren och k\u00f6r filen ovan, du ska se Datepicker p\u00e5 din sida.<\/p>\n
Implementera jQuery Datepicker med Time Picker<\/h3>\n
F\u00f6r att l\u00e4gga till en tidsv\u00e4ljare<\/a> anv\u00e4nder jag Timepicker-<\/a> plugin som \u00e4r l\u00e4tt att integrera med jQuery UI Datepicker.<\/p>\n
N\u00e4r du bes\u00f6ker webbplatsen, rulla ner till nedladdningsavsnittet och klicka p\u00e5 CDNJS-l\u00e4nken. Fr\u00e5n den h\u00e4r l\u00e4nken kopierar du plugin-programmets JS- och CSS-filer. H\u00e4r \u00e4r CDNJS-l\u00e4nken som du f\u00e5r fr\u00e5n deras webbplats<\/a>https:\/\/cdnjs.com\/libraries\/jquery-ui-timepicker-addon<\/a>.<\/p>\n
\"Hur<\/a><\/p>\n
P\u00e5 CDNJS-webbplatsen kan du se flera webbadresser f\u00f6r till\u00e4gget f\u00f6r timepicker. Kopiera nedanst\u00e5ende 2 l\u00e4nkar till JS och CSS.<\/p>\n
\"Hur<\/a><\/p>\n
Bara f\u00f6r att g\u00f6ra det enkelt, nedan \u00e4r dessa l\u00e4nkar. Anv\u00e4nd dessa l\u00e4nkar i n\u00e4sta steg i handledningen.<\/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
N\u00e4r du har f\u00e5tt den n\u00f6dv\u00e4ndiga JS och CSS \u00e4r du redo att l\u00e4gga till en timepicker. Vad du beh\u00f6ver g\u00f6ra \u00e4r att inkludera de kopierade filerna i HTML och ers\u00e4tta datepicker()<\/code>funktionen med datetimepicker()<\/code>.<\/p>\n
V\u00e5r slutkod \u00e4r som f\u00f6ljer:<\/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
Det \u00e4r allt! Nu om du laddar om sidan b\u00f6r du se b\u00e5de datapicker och timepicker p\u00e5 din sida. V\u00e4nligen forts\u00e4tt och prova det. Jag skulle vilja h\u00f6ra dina tankar i kommentarf\u00e4ltet nedan.<\/p>\n
relaterade artiklar<\/h4>\n