Come gli sviluppatori web potrebbero indubbiamente sapere, le date sono disponibili in un vasto assortimento di formati e ancora di più quando si considerano le variazioni locali. Non è necessario ricorrere a librerie di terze parti per formattare le date in Angular, poiché il popolare framework JavaScript fornisce il DatePipe esattamente per quello scopo. Non solo supporta una varietà di formati predefiniti, ma puoi anche definire i tuoi usando modelli. Infine, se ciò non bastasse, puoi estendere il DatePipe classe per migliorare le sue capacità native. In questo tutorial di sviluppo web creeremo i nostri formati di data/ora con nome per renderli più intuitivi da usare.

Nozioni di base su DatePipe in angolare

Il nome del DatePipe da utilizzare nei tuoi modelli è semplicemente “Data“. Invocato senza parametri, il DatePipe formatta la data specificata come una data media, ad esempio “01 gennaio 2022“, utilizzando il fuso orario del sistema locale della macchina dell’utente e le impostazioni locali del progetto, ad esempio, it-USA. Il più delle volte, gli sviluppatori vogliono almeno fornire un formato. Ecco la sintassi completa per DataPipe, compresi i parametri opzionali:

{{ date_Value | date [ : format [ : timeZone [ : locale ] ] ] }}

Leggi: Formattazione di intervalli di date JavaScript

Formati DatePipe predefiniti

L’angolare DatePipe vanta 12 formati predefiniti, tra cui “breve“, “medio“, e “lungo“. Questi formati includono sia la data che l’ora. Intanto il “shortDate“, “data media“, e “data lungaI formati ” omettono la parte temporale. Ci sono anche formati solo per orari. Non tratterò tutti questi qui oggi, ma, basti dire, formati con nome come questi sono molto più facili da lavorare rispetto a modelli di data come “gg/MM/aa HH:mm“, anch’essi validi. In effetti, creeremo il nostro DatePipe per incapsulare alcuni formati personalizzati nella sezione successiva.

Estensione del DatePipe angolare

I nostri DatePipe conterrà alcuni formati denominati, alcuni che sovrascrivono quelli predefiniti e altri di nostra creazione. Per beneficiare di tutto ciò che è l’Angolare integrato DatePipe consegna, lo estenderemo. Inoltre, implementeremo il PipeTransform interfaccia. Ci richiede di includere il trasformare() metodo, che Angular invoca quando vede la nostra pipe nel modello. È abbastanza versatile, quindi gli sviluppatori web possono utilizzarlo in qualsiasi modo ritengano opportuno. Ecco la sua firma:

transform(value: any, ...args: any[]): any

Il nostro recupera il motivo da a Carta geograficautilizzando il nome del formato come a chiaveprima di invocare l’Angolare La trasformazione di DatePipe() con il modello mappato. Noterai che è trasformare() è preceduto da super accessorio genitore:

import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';

export enum DateFormat {
  short="short date",
  medium = 'medium date',
  long = 'long date',
  dateOnly = 'date only',
}

@Pipe({
  name: 'customDate',
})
export class CustomDatePipe extends DatePipe implements PipeTransform {
  private readonly datePatterns = new Map<string, string>([
    ['short',    'd/M/y, h:mm:ss a'],
    ['medium',   'MMM d, y, h:mm:ss a'],
    ['long',     'EEEE, LLLL d, y, h:mm:ss a'],
    ['dateOnly', 'MMM d, y'],
  ]);

  transform(date: Date, format?: string): any {
    const pattern = 
      this.datePatterns.get(format) 
      || this.datePatterns.get('medium'); //default format

    return super.transform(date, pattern);
  }
}

Dobbiamo quindi dire ad Angular del CustomDatePipe aggiungendolo all’array di dichiarazioni in app.module.ts file:

import { CustomDatePipe } from './custom-date.pipe';

@NgModule({
  imports:      [ 
    BrowserModule, 
    FormsModule, 
    //...
  ],
  exports: [],
  declarations: [ AppComponent, CustomDatePipe ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Leggi: Analisi di date e ora con Luxon

Utilizzando CustomDatePipe

Per mettere il nostro CustomDatePipe attraverso i suoi ritmi, creiamo una semplice app che consente all’utente di scegliere un formato da un menu a discesa. I formati sono associati alle stringhe di visualizzazione mediante un enum. In questo modo, quando l’utente seleziona un elemento dall’elenco, la chiave viene passata alla nostra pipe tramite il formato selezionato variabile:

import { Component } from '@angular/core';
import { DateFormat } from './custom-date.pipe';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public dateTimeFormats = Object.keys(DateFormat);
  public selectedFormat: string = this.dateTimeFormats[0];
  public DateFormat = DateFormat;
  public testDate: Date = 
    new Date('Feb 05 2021 05:36:11 GMT-0500 (Eastern Standard Time)');
}

Nel modello, legheremo il file formato selezionato variabile al modello in modo che riceva il valore dell’opzione selezionata. Per fare riferimento al DataFormat Enum valore usando una variabile, possiamo usare l’array associativo Oggetto[key] sintassi:

<mat-form-field>
  <mat-label>Date Format</mat-label>
  <mat-select [(ngModel)]="selectedFormat">
    <mat-option *ngFor="let dateFormat of dateTimeFormats" [value]="dateFormat"
      >{{ DateFormat[dateFormat] }}
    </mat-option>
  </mat-select>
</mat-form-field>

Per confrontare i nostri formati con quello predefinito, mostreremo entrambi. Eseguiremo il data del test tramite la data personalizzata pipe per ottenere la data formattata. Il trasformare() accetta due argomenti: la data e la stringa di formato. Come per tutte le pipe angolari, il primo è il valore che viene trasformato, quindi lo vorremmo reindirizzare al nostro data personalizzata tubo, usando il “|operatore. Eventuali argomenti aggiuntivi devono essere separati utilizzando i due punti (:), e non una virgola, come farebbero in JavaScript o Dattiloscritto codice:

<p>
  Raw Date:<br />
  {{ testDate }}
</p>

<p>
  Formatted Date:<br />
  {{ testDate | customDate: selectedFormat }}
</p>

Ecco l’output per “breve” Data:

Puoi provare tu stesso l’app stackblitz.

Conclusione sui formati DatePipe in angolare

L’incorporato DatePipe è abbastanza versatile, quindi probabilmente non avrai bisogno di svilupparne uno a meno che tu non abbia molte date personalizzate che richiedono la generazione di schemi. Ma, in caso di necessità, ora hai la capacità di costruirne uno tuo DatePipe.

Per saperne di più Tutorial di sviluppo web JavaScript e Angular.