{"id":25011,"date":"2021-05-24T09:33:00","date_gmt":"2021-05-24T06:33:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25011"},"modified":"2021-10-18T03:10:55","modified_gmt":"2021-10-18T00:10:55","slug":"come-implementare-jquery-datepicker-con-timepicker","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/it\/come-implementare-jquery-datepicker-con-timepicker\/","title":{"rendered":"Come implementare jQuery Datepicker con Timepicker"},"content":{"rendered":"

Stai cercando di aggiungere un timepicker al Datepicker dell’interfaccia utente jQuery esistente? Aggiungendo un timepicker, \u00e8 possibile selezionare l’ora insieme alla data. In questo articolo, ti mostro un modo semplice per implementare jQuery Datepicker con un timepicker.<\/p>\n

Stiamo esaminando passo dopo passo l’aggiunta di un timepicker all’interfaccia utente di jQuery Datepicker. Se qualcuno non vuole seguire ogni passaggio, pu\u00f2 copiare direttamente il codice finale dall’ultima sezione di questo articolo.<\/p>\n

Al termine della nostra integrazione, il datetimepicker finale avr\u00e0 il seguente aspetto.<\/p>\n

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

Iniziamo con jQuery UI Datepicker<\/h3>\n

Il nostro obiettivo \u00e8 aggiungere un timepicker all’interfaccia utente di jQuery Datepicker<\/a>. jQuery Datepicker ci fornisce un calendario in linea per selezionare la data. Aggiungiamo questo datepicker utilizzando il codice sottostante.<\/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
Vai al browser ed esegui il file sopra, dovresti vedere il Datepicker sulla tua pagina.<\/p>\n
Implementa jQuery Datepicker con Time Picker<\/h3>\n
Per aggiungere un time picker, utilizzer\u00f2 il plug-in Timepicker<\/a> che \u00e8 facile da integrare con l’interfaccia utente di jQuery Datepicker.<\/p>\n
Una volta visitato il sito Web, scorrere verso il basso fino alla sezione download e fare clic sul collegamento CDNJS. Da questo collegamento, copia i file JS e CSS del plugin. Ecco il link CDNJS che otterrai dal loro sito web<\/a>https:\/\/cdnjs.com\/libraries\/jquery-ui-timepicker-addon<\/a>.<\/p>\n
\"Come<\/a><\/p>\n
Sul sito Web CDNJS, potresti vedere i diversi URL per l’addon timepicker. Copia i seguenti 2 collegamenti di JS e CSS.<\/p>\n
\"Come<\/a><\/p>\n
Giusto per semplificare, di seguito sono riportati questi collegamenti. Utilizzare questi collegamenti nel passaggio successivo del tutorial.<\/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
Una volta ottenuti i JS e CSS richiesti, sei pronto per aggiungere un timepicker. Quello che devi fare \u00e8 includere i file copiati in HTML e sostituire la datepicker()<\/code>funzione con datetimepicker()<\/code>.<\/p>\n
Il nostro codice finale \u00e8 il seguente:<\/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
Questo \u00e8 tutto! Ora, se ricarichi la pagina, dovresti vedere sia datepicker che timepicker sulla tua pagina. Per favore, vai avanti e provalo. Mi piacerebbe sentire i tuoi pensieri nella sezione commenti qui sotto.<\/p>\n
articoli Correlati<\/h4>\n