Los DatePickers son necesarios siempre que queramos solicitar la fecha al usuario. Podemos almacenar los datos y utilizarlos para usos futuros. jQuery proporciona un método sencillo para crear nuestro DatePicker. El DatePicker de jQuery está en línea, por lo que la interfaz de usuario es muy simple pero atractiva.
Sintaxis:
Necesitamos un elemento de entrada y luego vamos a llamar a la función jQuery DatePicker.
<input type="text" id="dob">
En la parte del script del código, llama a la función datepicker() para crear una instancia del widget datepicker.
<script>
$("#dob").datepicker();
</script>
Configuración del proyecto:
El selector de fecha y otras interfaces de usuario similares están disponibles en jQuery UI . Necesitamos descargarlos y luego almacenarlos dentro del directorio del proyecto. Extraerlo en una carpeta «jqueryui» en el directorio del proyecto. La estructura del proyecto se verá como la siguiente.
Importe los siguientes archivos de la siguiente manera dentro de la etiqueta principal .
<enlace rel=”hoja de estilo” href=”/jqueryui/jquery-ui.min.css”>
<script src=”/jqueryui/external/jquery/jquery.js”></script>
<script src=”/jqueryui /jquery-ui.min.js”></script>
Ejemplo 1: el código siguiente muestra un Selector de fecha simple. Lanzaremos el selector de fechas desde el elemento de entrada.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="jqueryui/jquery-ui.min.css">
<script src="jqueryui/external/jquery/jquery.js">
</script>
<script src="jqueryui/jquery-ui.min.js"></script>
</head>
<body>
<h1>Welcome to GeeksforGeeks</h1>
<p>Date of Birth:
<input type="text" id="dob">
</p>
<script>
$("#dob").datepicker();
</script>
</body>
</html>
Producción:
Ejemplo 2: el siguiente código muestra un DatePicker personalizado. Nuestro DatePicker no tiene el botón de cambio de año o mes. Además, el formato no se ve bien. Así que los cambiamos de la siguiente manera.
- changeMonth: Es de tipo booleano y si se establece en true , podemos cambiar el mes.
- changeYear: Es de tipo booleano y si se establece en true , podemos cambiar el año.
- minDate: establece la fecha mínima.
- maxDate: establece la fecha máxima. La configuración como +1 indica mañana, o -1 como ayer. Si desea establecer la fecha como el próximo año, use +1y o viceversa.
- dateFormat: establece el formato de la fecha. “dd/mm/aa” establece la fecha como fecha primero, luego el mes y luego el año.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="jqueryui/jquery-ui.min.css">
<script src="jqueryui/external/jquery/jquery.js">
</script>
<script src="jqueryui/jquery-ui.min.js"></script>
</head>
<body>
<h1>Welcome to GeeksforGeeks</h1>
<p>Date of Birth:
<input type="text" id="dob">
</p>
<script>
$("#dob").datepicker({
dateFormat: "dd/mm/yy",
maxDate: 0,
minDate: "01/01/2000",
changeYear: true,
changeMonth: true
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA