{"id":25153,"date":"2021-05-24T09:54:00","date_gmt":"2021-05-24T06:54:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25153"},"modified":"2021-10-17T18:52:38","modified_gmt":"2021-10-17T15:52:38","slug":"jquery-datepickeri-rakendamine-timepickeriga","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/et\/jquery-datepickeri-rakendamine-timepickeriga\/","title":{"rendered":"JQuery Datepickeri rakendamine Timepickeriga"},"content":{"rendered":"

Kas soovite olemasolevale jQuery UI Datepickerile lisada ajav\u00f5tja? Ajav\u00f5tja lisamisega saab valida kellaaja ja kuup\u00e4eva. Selles artiklis n\u00e4itan teile lihtsat viisi jQuery Datepickeri rakendamiseks ajam\u00f5\u00f5turiga.<\/p>\n

JQuery UI Datepickerisse lisame samm-sammult ajav\u00f5tja. Kui keegi ei soovi j\u00e4rgida k\u00f5iki samme, saab ta l\u00f5pliku koodi otse selle artikli viimasest osast kopeerida.<\/p>\n

Kui oleme oma integreerimisega l\u00f5pule j\u00f5udnud, n\u00e4eb l\u00f5plik kuup\u00e4evavalija v\u00e4lja j\u00e4rgmine.<\/p>\n

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

Alustame jQuery kasutajaliidese Datepickeriga<\/h3>\n

Meie eesm\u00e4rk on ajav\u00f5tja lisamine jQuery kasutajaliidese andmebaasi<\/a>. jQuery Datepicker pakub meile kuup\u00e4eva valimiseks sisekalendrit. Lisame selle andmevalija, kasutades allolevat koodi.<\/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
Minge brauserisse ja k\u00e4ivitage \u00fclaltoodud fail, peaksite oma lehel n\u00e4gema Datepickerit.<\/p>\n
Rakendage jQuery Datepicker koos ajavalijaga<\/h3>\n
Ajavalija<\/a> lisamiseks kasutan Timepickeri<\/a> pistikprogrammi, mida on lihtne integreerida jQuery UI Datepickeriga.<\/p>\n
Kui olete veebisaiti k\u00fclastanud, kerige alla allalaadimisjaotiseni ja kl\u00f5psake linki CDNJS. Sellelt lingilt kopeerige pistikprogrammi JS- ja CSS-failid. Siin on CDNJS-i link, mille leiate nende veebisaidilt<\/a>https:\/\/cdnjs.com\/libraries\/jquery-ui-timepicker-addon<\/a>.<\/p>\n
\"JQuery<\/a><\/p>\n
CDNJS-i veebisaidil v\u00f5ite kuvada ajav\u00f5tja lisandi mitu URL-i. Kopeerige JS-i ja CSS-i kaks allpool olevat linki.<\/p>\n
\"JQuery<\/a><\/p>\n
Lihtsalt selle lihtsustamiseks on allpool toodud lingid. Kasutage neid linke \u00f5petuse j\u00e4rgmises etapis.<\/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
Kui olete saanud vajaliku JS-i ja CSS-i, olete valmis lisama ajav\u00f5tja. Peate lisama kopeeritud failid HTML-i ja asendama datepicker()<\/code>funktsiooni datetimepicker()<\/code>.<\/p>\n
Meie l\u00f5plik kood on j\u00e4rgmine:<\/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
See selleks! Kui laadite lehe uuesti, peaksite oma lehel n\u00e4gema nii aja- kui ajav\u00f5tjat. Palun j\u00e4tkake ja proovige seda. Tahaksin kuulda teie m\u00f5tteid allpool olevast kommentaaride jaotisest.<\/p>\n
seotud artiklid<\/h4>\n