Puede que hayas oído hablar del jQuery Date Picker y probablemente lo hayas usado muchas veces. Así que en este tutorial no estamos hablando de un jQuery Date Picker, sino de un selector de fecha con opción de selección de tiempo.
jQuery Datepicker con Time Picker
Para agregar el selector de tiempo, primero debe instalar jQuery UI Datepicker.
Vamos a ver los pasos que muestran cómo instalar el selector de fecha usando jQuery UI paso a paso.
El siguiente código muestra cómo funciona el Datepicker normal de jQuery UI. Este código se puede utilizar en cualquier lugar en tu sitio web.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function(){
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<p>Fecha: <input type="text" id="datepicker"></p>
</body>
</html>Puedes abrir el archivo anterior en el navegador para ver lo que realmente es este selector de fecha.
Ahora pasamos a la version con selector de tiempo
Usaremos una librería llamada timepicker, ve a su sitio web haciendo clic aquí y ve a la sección de descargas, podrás ver los enlaces CDN JS y JS Deliver para descargar los archivos.
Pero en este ejemplo no estamos descargando ningún archivo en nuestro ordenador local, sino que utilizaremos el CDN.
Requisitos
También necesitas incluir jQuery y jQuery UI con datepicker y slider wigits. Debes incluirlos en tu página en el siguiente orden:
- jQuery
- jQueryUI (con datepicker y slider wigits)
- Timepicker
Puede ver el código completo a continuación para mostrar el selector de tiempo.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.css" >
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.js"></script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
<script>
jQuery(function($) {
$("#datepicker").datetimepicker();
});
</script>
</html>