Selector de fecha en Angular

1. Usando el Selector de fecha en Angular
2. Uso de la etiqueta input para crear un selector de fecha simple en Angular
3. Uso del evento onChange para obtener la fecha seleccionada del selector de fechas en Angular
4. Uso del evento onClick para guardar la fecha después de hacer clic en un botón en Angular
5. Uso de DatePipe para cambiar el formato de fecha en el selector de fecha en Angular

Presentaremos una manera fácil de agregar un selector de fecha en nuestra aplicación Angular con ejemplos.

También presentaremos la biblioteca del selector de fechas de Angular para mostrar un selector de fechas en Angular.

Usando el Selector de fecha en Angular

En esta era moderna de los sistemas de gestión, el selector de fecha es uno de los elementos de formulario más comunes. El selector de fecha permite al usuario elegir una fecha conocida, como la fecha de nacimiento o la fecha del evento.

Un selector de fecha puede permitirnos seleccionar la fecha que consiste en un día, mes y año en nuestra interfaz de usuario personalizada. Es una variación de un elemento de formulario de entrada.

Veamos un ejemplo para comprender cómo podemos usar un selector de fecha para seleccionar y obtener la fecha seleccionada en los eventos onChange y onSubmit.

La diferencia entre estos eventos es que sería mejor obtener valores del evento del formulario onSubmit si tenemos más de un campo.

Pero si solo tenemos un selector de fecha y queremos obtener la fecha una vez que el usuario la selecciona, podemos usar el evento onChange para obtener el valor.

Uso de la etiqueta input para crear un selector de fecha simple en Angular

Vamos a crear una nueva aplicación usando el siguiente comando.

# angular
ng new my-app

Después de crear nuestra nueva aplicación en Angular, iremos al directorio de nuestra aplicación usando este comando.

# angular
cd my-app

Ahora, ejecutemos nuestra aplicación para verificar si todas las dependencias están instaladas correctamente.

# angular
ng serve --open

Ahora crearemos un selector de fecha en el archivo app.component.html usando la etiqueta input.

# Angular
<input type="date" />

Esta línea de código creará un selector de fecha, como se muestra a continuación.

Producción:

Por lo tanto, podemos crear este tipo de selector de fecha usando esta simple línea de código. Ahora, obtengamos la fecha seleccionada cada vez que seleccionemos la fecha.

Uso del evento onChange para obtener la fecha seleccionada del selector de fechas en Angular

En app.component.ts, crearemos una función SendDataonChange que tomará como parámetro un event y console.log los datos seleccionados.

# Angular
SendDataonChange(event: any) {
console.log(event.target.value);
}

Ahora, configuremos esta función en la plantilla, que se activará cada vez que se cambie la fecha.

# Angular
<input type="date" (change)="SendDataonChange($event)" />

Producción:

Uso del evento onClick para guardar la fecha después de hacer clic en un botón en Angular

Supongamos que queremos guardar la fecha después de hacer clic en un botón. Podemos crear un botón en app.component.html y enlazarlo con una función onClick() creada en app.component.ts.

Entonces, nuestro código en app.component.html se verá como a continuación.

# Angular
<input type="date" (change)="SendDataonChange($event)" />
<br>
<button (click)="onClick()">Change</button>

Necesitamos vincular nuestro selector de fecha con [(ngModel)]. Así que nuestro código se verá como a continuación.

# Angular
<input type="date" (change)="SendDataonChange($event)" [(ngModel)]="changed" />
<br>
<button (click)="onClick()">Change</button>

Ahora, agreguemos algo de CSS para que nuestro botón y el selector de fecha se vean elegantes. Entonces, nuestro código en app.component.css se verá como a continuación.

# Angular
button {
padding: 10px;
background-color: black;
border: none;
color: white;
margin-top: 10px;
}
input{
padding: 5px;
font-size: 15px;
}

Producción:

En app.component.ts, definiremos la variable que vinculamos a nuestro selector de fechas.

# Angular
changed: Date;

Ahora, crearemos una función onClick que console.log el valor del selector de fecha una vez que se haga clic en el botón.

# Angular
onClick() {
console.log(this.changed);
}

Producción:

Uso de DatePipe para cambiar el formato de fecha en el selector de fecha en Angular

Ahora, analicemos cómo podemos cambiar el formato de la fecha.

Muchos desarrolladores están atascados trabajando con diferentes formatos de fecha porque el mejor desarrollador de software desarrolla software para que funcione de manera eficiente y sin errores.

La mejor manera de cambiar nuestro formato de fecha es crear una función para guardar la fecha y recuperarla. Entonces, el formato en la base de datos sigue siendo el mismo, pero podemos mostrarlo fácilmente en cualquier formato necesario usando funciones.

Primero, importaremos DatePipe en app.component.ts, como se muestra a continuación.

# Angular
import { DatePipe } from '@angular/common';

Ahora, definiremos una nueva variable, newDate, que se usará para guardar el valor de la fecha después de cambiar y devolver el formato.

Vamos a crear una función changeFormat() que tomará changed como parámetro y transformará el formato de fecha en el formato requerido usando DatePipe.

Definiremos una variable pipe que almacenará la zona horaria de la fecha.

Nuestro código en app.component.ts se verá a continuación.

# Angular
import { Component, VERSION } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
name = 'Angular ' + VERSION.major;
changed: Date;
pipe = new DatePipe('en-US');
newDate: string;
changeFormat(changed){
let ChangedFormat = this.pipe.transform(this.changed, 'dd/MM/YYYY');
this.newDate = ChangedFormat;
}

onClick() {
console.log(this.changed);
}
SendDataonChange(event: any) {
console.log(event.target.value);
}
}

Ahora pasaremos el valor de fecha de nuestra función onClick() y console.log el nuevo valor de fecha con un nuevo formato.

# Angular
onClick() {
this.changeFormat(this.changed);
console.log(this.newDate);
}

Producción:

Como ves en el ejemplo anterior, cuando seleccionamos la fecha, muestra 2022-01-19, pero cuando hacemos clic en el botón, llama a la función changeFormat() dentro de la función onClick() y devuelve la fecha con el formato cambiado.

De esta forma, podemos usar un selector de fecha en nuestra aplicación para guardar el valor de la fecha al seleccionar la fecha o guardar el valor cuando se hace clic en el botón. Y también aprendimos cómo podíamos cambiar el formato de fecha usando DatePipe.

Puedes consultar el código completo aquí.