如何在Angular及HTML模板中格式化/Date(1524210579389)日期

Hey there! Let’s tackle your two questions about handling that ASP.NET-style /Date(1524210579389) date format in Angular.

First, we need to extract the numeric timestamp from the string and convert it to a proper Date object. Once we have that, formatting it for display is straightforward with Angular’s built-in tools or a custom reusable pipe.

1. Parsing the /Date(timestamp) String #

The string /Date(1524210579389)/ contains a Unix timestamp in milliseconds. We can use a regex to pull out the numeric part, then convert it to a Date object. Add this helper function to your component:

parseAspDate(dateString: string): Date | null {
  // Regex to capture the timestamp inside /Date(...)/
  const timestampMatch = dateString.match(/\/Date\((\d+)\)\//);
  
  if (timestampMatch && timestampMatch[1]) {
    // Convert the timestamp string to a number, then create a Date instance
    return new Date(Number(timestampMatch[1]));
  }
  
  // Return null if the input string is invalid
  return null;
}

2. Displaying Formatted Date in HTML Template #

Once you have a valid Date object, you can use Angular’s built-in DatePipe to format it directly in your template. Here are two common approaches:

Option A: Pre-process in Component (Recommended) #

Process the date string in your component first to avoid repeated calculations in the template:

// In your component class
originalDateString = '/Date(1524210579389)/';
formattedDate: Date | null = this.parseAspDate(this.originalDateString);

Then in your template, use the DatePipe with your desired format:

<p>Formatted Date: {{ formattedDate | date: 'yyyy-MM-dd HH:mm:ss' }}</p>

Common format options include:

• 'medium': Jun 20, 2024, 1:23:45 PM
• 'short': 6/20/24, 1:23 PM
• Custom formats like 'MMM d, yyyy' (e.g., Jun 20, 2024)

Option B: Custom Pipe for Reuse #

If you need to format this date type across multiple components, create a custom pipe that handles both parsing and formatting:

1. Generate the pipe using Angular CLI:

ng generate pipe aspDateFormatter

2. Update the pipe’s transform method:

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

@Pipe({ name: 'aspDateFormatter' })
export class AspDateFormatterPipe implements PipeTransform {
  transform(dateString: string, format: string = 'mediumDate'): string {
    const timestampMatch = dateString.match(/\/Date\((\d+)\)\//);
    
    if (timestampMatch && timestampMatch[1]) {
      const date = new Date(Number(timestampMatch[1]));
      const datePipe = new DatePipe('en-US'); // Replace with your app's locale
      return datePipe.transform(date, format) || 'Invalid Date';
    }
    
    return 'Invalid Date';
  }
}

3. Declare the pipe in your module, then use it directly in the template:

<p>Formatted Date: {{ '/Date(1524210579389)/' | aspDateFormatter: 'yyyy-MM-dd HH:mm:ss' }}</p>

Quick Notes #

• Time Zones: The timestamp in /Date(timestamp) is usually UTC. When creating a Date object, it converts to the user’s local time zone. To display UTC time, add 'Z' to your format string (e.g., 'yyyy-MM-dd HH:mm:ss Z').
• Locale: Ensure CommonModule (which includes DatePipe) is imported in your Angular module. For locale-specific formats, configure your app’s default locale in app.module.ts.

内容的提问来源于stack exchange，提问作者ShaneKm