{"id":27793,"date":"2021-05-24T09:20:00","date_gmt":"2021-05-24T06:20:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=27793"},"modified":"2021-10-18T04:09:51","modified_gmt":"2021-10-18T01:09:51","slug":"como-implementar-jquery-datepicker-com-timepicker","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/como-implementar-jquery-datepicker-com-timepicker\/","title":{"rendered":"Como implementar jQuery Datepicker com Timepicker"},"content":{"rendered":"

Voc\u00ea est\u00e1 querendo adicionar um seletor de tempo ao Datepicker existente do jQuery UI? Ao adicionar um seletor de tempo, pode-se selecionar a hora junto com a data. Neste artigo, mostro uma maneira simples de implementar jQuery Datepicker com um seletor de tempo.<\/p>\n

Estamos seguindo passo a passo como adicionar um seletor de tempo ao jQuery UI Datepicker. Se algu\u00e9m n\u00e3o quiser seguir cada etapa, pode copiar diretamente o c\u00f3digo final da \u00faltima se\u00e7\u00e3o deste artigo.<\/p>\n

Quando terminarmos com nossa integra\u00e7\u00e3o, o datetimepicker final ter\u00e1 a seguinte apar\u00eancia.<\/p>\n

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

Vamos come\u00e7ar com jQuery UI Datepicker<\/h3>\n

Nosso objetivo \u00e9 adicionar um seletor de tempo ao jQuery UI Datepicker<\/a>. jQuery Datepicker nos fornece um calend\u00e1rio embutido para selecionar a data. Vamos adicionar este selecionador de data usando o c\u00f3digo abaixo.<\/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
V\u00e1 para o navegador e execute o arquivo acima, voc\u00ea dever\u00e1 ver o Datepicker em sua p\u00e1gina.<\/p>\n
Implementar jQuery Datepicker com Time Picker<\/h3>\n
Para adicionar um seletor de tempo, usarei o<\/a> plugin Timepicker,<\/a> que \u00e9 f\u00e1cil de integrar com jQuery UI Datepicker.<\/p>\n
Depois de visitar o site, role para baixo at\u00e9 a se\u00e7\u00e3o de download e clique no link CDNJS. A partir deste link, copie os arquivos JS e CSS do plug-in. Aqui est\u00e1 o link do CDNJS que voc\u00ea obter\u00e1 no site deles<\/a>https:\/\/cdnjs.com\/libraries\/jquery-ui-timepicker-addon<\/a>.<\/p>\n
\"Como<\/a><\/p>\n
No site do CDNJS, voc\u00ea pode ver os diversos URLs do complemento timepicker. Copie os 2 links abaixo de JS e CSS.<\/p>\n
\"Como<\/a><\/p>\n
Apenas para facilitar, abaixo est\u00e3o esses links. Use esses links na pr\u00f3xima etapa do 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
Depois de obter o JS e CSS necess\u00e1rios, voc\u00ea est\u00e1 pronto para adicionar um seletor de tempo. O que voc\u00ea precisa fazer \u00e9 incluir os arquivos copiados em HTML e substituir a datepicker()<\/code>fun\u00e7\u00e3o por datetimepicker()<\/code>.<\/p>\n
Nosso c\u00f3digo final \u00e9 o seguinte:<\/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
\u00c9 isso! Agora, se voc\u00ea recarregar a p\u00e1gina, dever\u00e1 ver o seletor de data e hora em sua p\u00e1gina. V\u00e1 em frente e experimente. Eu gostaria de ouvir sua opini\u00e3o na se\u00e7\u00e3o de coment\u00e1rios abaixo.<\/p>\n
Artigos relacionados<\/h4>\n