Obtener la fecha actual en Angular

Rana Hasnain Khan 20 marzo 2023
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:

obtener la fecha actual en angular

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:

cambio de formato de fecha usando el datepipe en angular

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().

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn

Artículo relacionado - Angular Date