Obtener la fecha actual en Angular

Presentaremos una manera fácil de obtener la fecha actual en nuestra aplicación Angular con ejemplos. También abordaremos cómo cambiar los formatos de fecha en Angular.

Obtener la fecha actual en Angular

La fecha es uno de los elementos más comunes e importantes que necesitamos en nuestra aplicación para guardar o borrar todos los registros basados en fechas. Nos ayuda a administrar y mostrar datos en función de un parámetro de fecha.

Una fecha consiste en un día, mes y año en nuestra interfaz de usuario personalizada. Para ayudarlo a comprender, aquí hay un ejemplo de cómo podemos obtener la fecha actual fácilmente.

Usando el siguiente comando, creamos una nueva aplicación en Angular.

# angular
ng new my-app

Después de crear nuestra aplicación en Angular, iremos a nuestro directorio de aplicaciones.

# angular
cd my-app

Ejecutamos nuestra aplicación para verificar si todas las dependencias están instaladas correctamente.

# angular
ng serve --open

Obtendremos la fecha actual usando el método date() en el archivo app.component.ts.

# Angular
today = new Date();

Esta línea de código obtendrá la fecha actual como se muestra en la salida.

Producción:

Usando esta línea de código, podemos obtener la fecha actual en este formato. Intentemos cambiar el formato de fecha según nuestras necesidades.

Crearemos una función cambiarFormato que guardará la fecha y cambiará su formato según nosotros. Por lo tanto, el formato sigue siendo el mismo cada vez que lo usamos, pero si queremos cambiarlo a cualquier otro formato, podemos cambiarlo fácilmente o mostrarlo en cualquier formato necesario usando funciones.

Importemos DatePipe en app.component.ts como se muestra a continuación.

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

Definiremos una nueva variable, ChangedDate que usaremos para guardar el valor de la fecha después de que nuestra función cambie el formato. Crea una función changeFormat() que tomará hoy como parámetro y transformará la fecha al nuevo formato definido por nosotros usando DatePipe().

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

El código en app.component.ts se verá como el siguiente.

# 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 ';
  today = new Date();
  changedDate = '';
  pipe = new DatePipe('en-US');
  changeFormat(today){
    let ChangedFormat = this.pipe.transform(this.today, 'dd/MM/YYYY');
    this.changedDate = ChangedFormat;
    console.log(this.changedDate);
  }
}

Crearemos un nuevo botón que activará la función cambiar formato () cuando hagamos clic en este botón. También mostraremos la fecha en un nuevo formato usando la nueva variable que acabamos de asignar.

# Angular
<hello name="{{ name }}"></hello>
<p>
  Today is {{ today }}
</p>
<button (click)='changeFormat(today)'>Change Date</button>
<p>
  Today is {{ this.changedDate }}
</p>

Producción:

En el ejemplo anterior, muestra Tue Apr 05 2022 17:16:06 GMT+0500 (Pakistan Standard Time) pero cuando hacemos clic en el botón "Change Date" llama a la función changeFormat() dentro del método click(), y devuelve la fecha con el formato modificado.

De esta manera, podemos obtener la fecha actual en nuestra aplicación que se puede cambiar de formato usando DatePipe().