Guía Completa del Datepicker de Angular Material

El selector de fechas, o Datepicker, es uno de los componentes de formulario más utilizados en el desarrollo de aplicaciones web con Angular. Afortunadamente, Angular Material ofrece un componente robusto y versátil, diseñado específicamente para Angular, evitando la necesidad de recurrir a librerías externas como jQuery Datepicker.

El Datepicker de Angular Material es un componente completo, repleto de opciones útiles que quizás desconozcas. En este artículo, te guiaremos a través de este componente en detalle, cubriendo desde las funcionalidades más básicas hasta las más avanzadas, para que puedas aprovechar al máximo su potencial en tus proyectos.

¿Qué diferencia hay entre dateInput y dateChange?

Es común confundir los eventos dateInput y dateChange del Datepicker de Angular Material, ya que ambos se activan cuando la fecha cambia. Sin embargo, existen diferencias sutiles pero importantes:

• dateInput: Este evento se emite cuando el valor del input cambia. Esto ocurre cada vez que el usuario interactúa con el input, ya sea escribiendo directamente en él o seleccionando una fecha del calendario desplegable. Es decir, se dispara en tiempo real mientras se modifica el valor, incluso antes de que se considere una fecha válida completa.
• dateChange: Este evento se emite cuando el valor del input cambia y se confirma. La confirmación ocurre al seleccionar una fecha del calendario y cerrar el desplegable, o al salir del input (blur) después de escribir una fecha válida. dateChange se asegura de que la fecha sea válida según el formato configurado.

En resumen, dateInput reacciona a cualquier cambio en el input, mientras que dateChange se enfoca en cambios confirmados y válidos. La elección entre uno u otro dependerá de tus necesidades específicas. Si necesitas reaccionar a cada pulsación o cambio inmediato, usa dateInput. Si solo te interesa la fecha final seleccionada y validada, dateChange es la mejor opción.

¿Cómo establecer la fecha mínima en el Datepicker de Angular Material?

Restringir el rango de fechas que el usuario puede seleccionar es una funcionalidad común en los selectores de fecha. Angular Material facilita esto mediante la propiedad min del mat-datepicker. Para establecer una fecha mínima, sigue estos pasos:

1. Define una variable en tu componente para almacenar la fecha mínima deseada. Por ejemplo, en tu archivo .ts:

minDate = new Date(2023, 10, 20); // 20 de Noviembre de 2023

2. En tu plantilla HTML, enlaza la propiedad min del mat-datepicker a esta variable:

<mat-form-field> <input matInput [matDatepicker]="picker" [min]="minDate" placeholder="Elige una fecha"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field>

Con esta configuración, el Datepicker deshabilitará todas las fechas anteriores a la minDate especificada, impidiendo que el usuario las seleccione.

Guía Completa para Usar el Datepicker de Angular Material

A continuación, exploraremos en detalle las diferentes características y opciones de configuración que ofrece el Datepicker de Angular Material.

Configuración Básica del Datepicker

Un Datepicker típico en Angular Material se compone de tres elementos principales:

1. Campo de texto input: Para la introducción manual de la fecha.
2. Calendario modal: Se despliega al lado del input para la selección visual de la fecha.
3. Icono de calendario (toggle): Para abrir y cerrar el calendario modal.

Comencemos creando un Datepicker paso a paso, explicando cómo se conectan estos elementos.

1. Input de texto plano

Inicialmente, necesitamos un input de texto básico de Angular Material:

<mat-form-field appearance="outline"> <mat-label>Fecha de lanzamiento</mat-label> <input matInput formControlName="releasedAt" name="releasedAt"> </mat-form-field>

Este es un input de Angular Material estándar, enlazado a un FormControl mediante formControlName. Es importante notar el uso de matInput, directiva esencial para que el input funcione correctamente dentro de Angular Material.

2. Añadir el calendario modal

Ahora, agregamos el calendario modal al input utilizando la directiva matDatepicker:

<mat-form-field appearance="outline"> <mat-label>Fecha de lanzamiento</mat-label> <input matInput formControlName="releasedAt" name="releasedAt" [matDatepicker]="picker"> <mat-datepicker #picker></mat-datepicker> </mat-form-field>

La directiva [matDatepicker]="picker" vincula el input con el elemento modal del calendario identificado por #picker.

3. Añadir el botón Toggle

Para poder abrir y cerrar el calendario, necesitamos un botón toggle. Lo agregaremos como un sufijo al input y lo conectaremos con el calendario modal usando la directiva for:

<mat-form-field appearance="outline"> <mat-label>Fecha de lanzamiento</mat-label> <input matInput formControlName="releasedAt" name="releasedAt" [matDatepicker]="picker"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field>

Con esto, ya tenemos la configuración mínima de nuestro Datepicker. ¡Puedes abrir el calendario y seleccionar una fecha!

Abrir el calendario al hacer clic en el input

Una funcionalidad común es abrir el calendario automáticamente al hacer clic en el input. Esto se logra fácilmente añadiendo un manejador de evento click:

<mat-form-field appearance="outline"> <mat-label>Fecha de lanzamiento</mat-label> <input matInput formControlName="releasedAt" name="releasedAt" [matDatepicker]="picker" (click)="picker.open()"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field>

Al hacer clic en el input, se llamará al método picker.open(), abriendo el calendario.

Configurar el icono del Toggle

El botón toggle, por defecto, muestra un icono de calendario. Puedes personalizar tanto la posición como el icono mismo.

Posición del icono

Por defecto, el icono del toggle aparece a la derecha del input (matSuffix). Si deseas mostrarlo a la izquierda, utiliza matPrefix en lugar de matSuffix:

<mat-datepicker-toggle matPrefix [for]="picker"></mat-datepicker-toggle>

Icono personalizado

Puedes usar cualquier icono de la librería de iconos de Material Design. Por ejemplo, para usar un icono diferente de calendario:

<mat-datepicker-toggle matSuffix [for]="picker"> <mat-icon matDatepickerToggleIcon>date_range</mat-icon> </mat-datepicker-toggle>

La directiva matDatepickerToggleIcon es necesaria para que el icono personalizado funcione.

Prevenir la entrada manual de fechas

Si deseas que el usuario solo pueda seleccionar fechas a través del calendario y no escribiéndolas manualmente, puedes deshabilitar el input:

<mat-form-field appearance="outline"> <mat-label>Fecha de lanzamiento</mat-label> <input matInput formControlName="releasedAt" name="releasedAt" [matDatepicker]="picker" disabled> <mat-datepicker-toggle matSuffix [for]="picker" [disabled]="false"></mat-datepicker-toggle> <mat-datepicker #picker [disabled]="false"></mat-datepicker> </mat-form-field>

Es importante notar que al deshabilitar el input, también se deshabilitan el toggle y el calendario por defecto. Para permitir la selección visual a pesar de deshabilitar el input, debes sobreescribir la propiedad disabled tanto en el toggle como en el calendario, estableciéndola a false.

Configurar la vista inicial del calendario

Por defecto, el calendario se abre mostrando la vista mensual del mes actual. Para fechas como cumpleaños, podría ser más útil comenzar con la vista anual o multianual. Esto se configura con la propiedad startView:

<mat-datepicker #picker startView="year"></mat-datepicker>

Los valores posibles para startView son: month (por defecto), year y multi-year.

Configurar la fecha de inicio del calendario

La fecha de inicio del calendario, por defecto, es la fecha actual. Puedes establecer una fecha de inicio diferente con la propiedad startAt:

startDate = new Date(2010, 0, 1);

<mat-datepicker #picker [startAt]="startDate"></mat-datepicker>

Limitar el rango de fechas de entrada

Ya vimos cómo establecer una fecha mínima con min. De manera similar, puedes definir una fecha máxima con la propiedad max. También puedes combinar ambas para definir un rango de fechas válido:

minDate = new Date(2010, 0, 3); maxDate = new Date(2010, 0, 15);

<input matInput [matDatepicker]="picker" [min]="minDate" [max]="maxDate" placeholder="Elige una fecha">

Las fechas fuera del rango definido se mostrarán deshabilitadas en el calendario.

Validación personalizada de fechas con matDatepickerFilter

Para una validación más específica, como permitir solo ciertos días de la semana, puedes usar matDatepickerFilter. Necesitas definir una función de filtro que determine si una fecha es válida o no:

dateFilter = (date: Date | null): boolean => { if (!date) { return false; } const day = date.getDay(); // Permitir solo lunes (getDay() retorna 0 para domingo, 1 para lunes, etc.) return day === 1; }; 

<mat-datepicker #picker [matDatepickerFilter]="dateFilter"></mat-datepicker>

En este ejemplo, solo los lunes estarán habilitados para la selección.

Configurar la apariencia del calendario

Por defecto, el Datepicker usa la paleta de colores primaria de tu tema de Angular Material. Puedes cambiar esto utilizando la propiedad color para usar la paleta accent o warn (peligro):

<mat-datepicker #picker color="accent"></mat-datepicker>

Añadir estilos personalizados a fechas específicas

Para un control más granular sobre el estilo de cada celda de fecha, puedes usar dateClass. Define una función que retorne clases CSS para fechas específicas:

dateClass = (d: Date) => { const date = d.getDate(); // Resaltar el primer día de cada mes return date === 1 ? 'highlight-date': undefined; }; 

<mat-datepicker #picker [dateClass]="dateClass"></mat-datepicker>

Luego, define la clase CSS .highlight-date en tu archivo CSS para aplicar el estilo deseado.

Soporte para dispositivos móviles

Para mejorar la experiencia en dispositivos móviles, puedes activar una interfaz más amigable al tacto con la propiedad touchUi:

<mat-datepicker #picker touchUi="true"></mat-datepicker>

Esto hará que el calendario modal sea más grande y fácil de usar en pantallas táctiles.

Usar el calendario en modo standalone

Si solo necesitas mostrar un calendario directamente en la página, sin un input asociado, puedes usar el componente mat-calendar en modo standalone:

<mat-calendar></mat-calendar>

Este calendario inline permite la selección directa de fechas dentro de la página.

Selector de Rango de Fechas en Angular Material

Angular Material también ofrece componentes para seleccionar rangos de fechas, en lugar de una sola fecha. Para esto, se utilizan mat-date-range-input y mat-date-range-picker.

Ejemplo Básico de Selector de Rango de Fechas:

<mat-form-field appearance="fill"> <mat-label>Introduce un rango de fechas</mat-label> <mat-date-range-input [rangePicker]="picker"> <input matStartDate placeholder="Fecha de inicio"> <input matEndDate placeholder="Fecha de fin"> </mat-date-range-input> <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-date-range-picker #picker></mat-date-range-picker> </mat-form-field>

En este ejemplo, mat-date-range-input contiene dos inputs, uno para la fecha de inicio (matStartDate) y otro para la fecha de fin (matEndDate). mat-date-range-picker maneja la selección del rango.

Preguntas Frecuentes (FAQ)

1. ¿Cómo cambiar el formato de fecha que se muestra en el input?
   El formato de fecha se controla a través de los Locales de Angular. Debes configurar el Locale apropiado para tu idioma en tu módulo principal (AppModule) o en un módulo específico. Consulta la documentación de Angular sobre internacionalización (i18n) para más detalles.
2. ¿Puedo personalizar los colores del calendario?
   Sí, puedes personalizar los colores a través del tema de Angular Material. Puedes definir paletas de colores personalizadas y aplicarlas al componente Datepicker.
3. ¿Cómo puedo obtener la fecha seleccionada en el componente?
   La fecha seleccionada se refleja en el FormControl al que está enlazado el input del Datepicker. Puedes acceder al valor del FormControl en tu componente TypeScript.
4. ¿Es posible deshabilitar fechas futuras o pasadas en el selector de rango de fechas?
   Sí, puedes usar las propiedades min y max tanto en matStartDate como en matEndDate dentro de mat-date-range-input para definir rangos válidos para la fecha de inicio y la fecha de fin por separado.
5. ¿Cómo puedo agregar validaciones personalizadas al rango de fechas?
   Puedes agregar validaciones personalizadas al FormGroup que contiene los FormControl para las fechas de inicio y fin. También puedes usar validadores personalizados en los propios FormControl.

Resumen

El Datepicker de Angular Material es un componente extremadamente versátil y personalizable, que ofrece una amplia gama de opciones para adaptarse a las necesidades de tu aplicación. Desde la configuración básica hasta las validaciones personalizadas y el soporte para rangos de fechas, Angular Material te proporciona las herramientas necesarias para crear selectores de fecha robustos y amigables para el usuario.

Esperamos que esta guía completa te haya sido de gran utilidad para comprender y utilizar el Datepicker de Angular Material en tus proyectos. ¡Explora la documentación oficial de Angular Material para descubrir aún más funcionalidades y opciones de configuración!