{"id":28351,"date":"2021-05-24T09:36:00","date_gmt":"2021-05-24T06:36:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28351"},"modified":"2021-10-17T16:48:22","modified_gmt":"2021-10-17T13:48:22","slug":"como-implementar-jquery-datepicker-con-timepicker","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/como-implementar-jquery-datepicker-con-timepicker\/","title":{"rendered":"C\u00f3mo implementar jQuery Datepicker con Timepicker"},"content":{"rendered":"

\u00bfEst\u00e1 buscando agregar un selector de tiempo al selector de fechas existente de jQuery UI? Al agregar un selector de tiempo, se puede seleccionar la hora junto con la fecha. En este art\u00edculo, le muestro una forma sencilla de implementar jQuery Datepicker con un selector de tiempo.<\/p>\n

Vamos a ir paso a paso para agregar un selector de tiempo al selector de fechas de jQuery UI. Si alguien no quiere seguir cada paso, puede copiar directamente el c\u00f3digo final de la \u00faltima secci\u00f3n de este art\u00edculo.<\/p>\n

Cuando terminemos con nuestra integraci\u00f3n, el selector de fecha y hora final se ver\u00e1 de la siguiente manera.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

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

Nuestro objetivo es agregar un selector de tiempo al selector de fechas de jQuery UI<\/a>. jQuery Datepicker nos proporciona un calendario en l\u00ednea para seleccionar la fecha. Agreguemos este selector de fechas usando el siguiente c\u00f3digo.<\/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
Vaya al navegador y ejecute el archivo anterior, deber\u00eda ver el selector de fecha en su p\u00e1gina.<\/p>\n
Implementar jQuery Datepicker con Time Picker<\/h3>\n
Para agregar un selector de tiempo, usar\u00e9 el<\/a> complemento Timepicker<\/a> que es f\u00e1cil de integrar con jQuery UI Datepicker.<\/p>\n
Una vez que visite el sitio web, despl\u00e1cese hacia abajo hasta la secci\u00f3n de descarga y haga clic en el enlace CDNJS. Desde este enlace, copie los archivos JS y CSS del complemento. Aqu\u00ed est\u00e1 el enlace CDNJS que obtendr\u00e1 de su sitio web<\/a>https:\/\/cdnjs.com\/libraries\/jquery-ui-timepicker-addon<\/a>.<\/p>\n
\"C\u00f3mo<\/a><\/p>\n
En el sitio web de CDNJS, es posible que vea varias URL para el complemento timepicker. Copie los siguientes 2 enlaces de JS y CSS.<\/p>\n
\"C\u00f3mo<\/a><\/p>\n
Para facilitar las cosas, a continuaci\u00f3n se muestran esos enlaces. Utilice estos enlaces en el siguiente paso 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 vez que obtenga los JS y CSS necesarios, estar\u00e1 listo para agregar un selector de tiempo. Lo que debe hacer es incluir los archivos copiados en HTML y reemplazar la datepicker()<\/code>funci\u00f3n con datetimepicker()<\/code>.<\/p>\n
Nuestro c\u00f3digo final es el siguiente:<\/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
\u00a1Eso es! Ahora, si vuelve a cargar la p\u00e1gina, deber\u00eda ver tanto el selector de fecha como el selector de tiempo en su p\u00e1gina. Por favor, adelante y pru\u00e9balo. Me gustar\u00eda escuchar sus pensamientos en la secci\u00f3n de comentarios a continuaci\u00f3n.<\/p>\n
Art\u00edculos relacionados<\/h4>\n