Selector de Fecha
El selector de fecha muestra un calendario mensual y permite al usuario elegir una fecha concreta.
- HTML
- JS
<form class="ulpgcds-form">
<div class="ulpgcds-form__item">
<label for="fecha-datepicker-1">Selecciona una fecha</label>
<input autocomplete="off" class="ulpgcds-datepicker" id="fecha-datepicker-1" name="fecha" type="text" value="" placeholder="dd/mm/aaaa" />
</div>
</form> $( "#fecha-datepicker-1" ).datepicker({
changeMonth: true,
changeYear: true
}); Variantes
Selección de fecha con icono
- HTML
- JS
<form class="ulpgcds-form">
<div class="ulpgcds-form__item">
<label for="fecha-datepicker-2">Selecciona una fecha</label>
<input autocomplete="off" class="ulpgcds-datepicker ulpgcds-form__item--icon" id="fecha-datepicker-2" name="fecha" type="text" value="" placeholder="dd/mm/aaaa" />
<span class="ulpgcds-icon-calendar"></span>
</div>
</form> Dependencias externas
Para favorecer la integración con los múltiples sitios web de la ULPGC, y dado la popularidad de la librería de jQuery Datepicker, se ha hecho una adaptación a nivel de estilos para adaptarlos a la estética del Design System.
Para poder hacer uso de él, se deberá incluir la librería de jQuery necesaria en la forma:
<head>
...
<link rel="stylesheet" media="all" href="https://cdn.ulpgc.es/ulpgcds/1.0/js/jquery.ui/datepicker.css" />
...
<link type="text/css" rel="stylesheet" href="https://cdn.ulpgc.es/ulpgcds/1.0/css/ulpgcds.css" media="all" />
...
</head>
<body>
...
<script src="https://cdn.ulpgc.es/ulpgcds/1.0/js/jquery.ui/datepicker.js"></script>
</body>
</html>La librería CSS del componente "datepicker" debe incluirse necesariamente antes que el CSS de "ulpgcds".
Uso del componente
El selector de fecha tiene una finalidad muy concreta, y puede ser utilizado tanto como parte de un formulario de recogida de información como elemento para filtrar la vista de una página.
Buenas prácticas:
- Sea claro y conciso en el texto de las etiquetas. No emplee textos que el usuario no tiene porque conocer previamente.
- Es conveniente evitar que texto de la etiqueta este escrito en mayúsculas, esto puede dificultar la experiencia del usuario.
- Siempre permita la inserción de fecha mediante teclado.
- El selector de fecha solo debería permitir el uso de caracteres numéricos y el símbolo de barra obliqua "/".
- Para asegurar que usuario entiende el formato de la fecha, muestre un texto de prueba o placeholder.
- El campo de fecha sólo admite la selección de una fecha al mismo tiempo. Si necesita recoger un rango de fechas, emplee dos campos diferentes con sus correspondiente etiquetas y muéstrelos en un orden lógico para los usuarios (fecha de inicio y fecha de fin).
Estilos CSS
Estas son las clases aplicadas a las etiquetas HTML para conseguir los diferentes estilos.
| Selector CSS | Descripción |
|---|---|
| form.ulpgcds-form | Necesario en el formulario dónde se introducen los campos de fecha |
| form div.ulpgcds-form__item | Cada fila correspondiente al componente del formulario |
| form input.ulpgcds-datepicker | Activa la funcionalidad del datepicker |
| form input.ulpgcds-form__item--icon | Aplica estilos de identación al establecer un icono/td> |
| form div.ulpgcds-form__item--icon | Variación para campos de texto con icono |
| form div.help-text | Texto de ayuda debajo del campo |
| form div input.form-item__error | Indica que ese componente tiene un error |
Diseño
En esta sección se pueden ver los aspectos que presenta el componente para las diferentes pseudoclases relativas a la interacción con el mismo. Estos estilos siguen los mismos patrones de interacción que el resto de los componentes del Design System, por lo que su modificación puede afectar a la consistencia del sistema y a la experiencia de los usuarios.
