Angular 4从WebApi获取日期的格式处理及日历控件显示问题

问题背景 #

我从Web API获取的发布日期是带T的ISO格式（如2018-03-02T00:00:00），在使用PrimeNG的p-calendar控件绑定该日期时，无法正确显示仅日期部分，控件显示异常。

以下是我的现有代码实现：

1. Web API返回的日期格式

<PublishDate>2018-03-02T00:00:00</PublishDate>

2. TypeScript数据结构定义

export class IResource { 
  ResourceId: number; 
  ResourceTitle: string; 
  Description: string; 
  PublishDate?: Date; 
  ImgUrl: string; 
}

3. 服务层代码

GetResourceById(resourceId) { 
  this.appServiceManager.libGet("Resource/" + resourceId)
    .subscribe((response: any) => { 
      this.resource = response; 
    }, (error: any) => { 
      alert(error); 
    }); 
}

4. HTML模板代码

<div class="col-md-4 noPadding">Publish Date</div>
<div class="col-md-8 noPadding">
  <p-calendar 
    name="PublishDate" 
    [(ngModel)]="resource.PublishDate" 
    dateFormat="mm/dd/yy" 
    [showIcon]="true">
  </p-calendar>
</div>

5. Web API服务端代码（C#）

public ResourceDTO Find(int id) { 
  //根据ID获取资源 
  Resource dbresource = _db.Resources.Where(m => m.ResourceId == id).FirstOrDefault(); 
  ResourceDTO resourcesDTO = Mapper.Map<ResourceDTO>(dbresource);
  return resourcesDTO; 
}

异常显示截图

问题分析 #

核心问题在于：Angular在接收JSON格式的API响应时，不会自动将ISO日期字符串转换为Date对象，所以你的resource.PublishDate实际上是一个字符串类型，而p-calendar控件需要绑定的是Date实例，这就导致了控件无法正确解析并显示日期。

解决方案 #

这里提供几种针对性的解决方法，你可以根据项目需求选择：

方法1：在服务层手动转换日期

在接收API响应后，直接将PublishDate字段转换为Date对象：

GetResourceById(resourceId) { 
  this.appServiceManager.libGet("Resource/" + resourceId)
    .subscribe((response: any) => { 
      // 将ISO字符串转换为Date实例
      response.PublishDate = new Date(response.PublishDate);
      this.resource = response; 
    }, (error: any) => { 
      alert(error); 
    }); 
}

方法2：使用HTTP拦截器统一处理所有日期字段

如果你的项目中有大量日期字段需要处理，推荐创建一个HTTP拦截器，自动遍历响应中的所有字段，将符合ISO格式的字符串转换为Date对象：

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable()
export class DateInterceptor implements HttpInterceptor {
  // 匹配ISO日期格式的正则表达式
  private readonly isoDateRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d*)?$/;

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      map((event: HttpEvent<any>) => {
        if (event instanceof HttpResponse) {
          this.transformDates(event.body);
        }
        return event;
      })
    );
  }

  private transformDates(data: any): void {
    if (data == null || typeof data !== 'object') {
      return;
    }

    Object.keys(data).forEach(key => {
      const value = data[key];
      // 匹配ISO日期字符串则转换为Date
      if (typeof value === 'string' && this.isoDateRegex.test(value)) {
        data[key] = new Date(value);
      } 
      // 递归处理嵌套对象
      else if (typeof value === 'object') {
        this.transformDates(value);
      }
    });
  }
}

然后在app.module.ts中注册这个拦截器：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { DateInterceptor } from './path/to/date.interceptor';

@NgModule({
  providers: [
    { 
      provide: HTTP_INTERCEPTORS, 
      useClass: DateInterceptor, 
      multi: true 
    }
  ]
})
export class AppModule { }

方法3：优化p-calendar控件配置

确保控件强制只显示日期部分，添加[showTime]="false"配置：

<div class="col-md-4 noPadding">Publish Date</div>
<div class="col-md-8 noPadding">
  <p-calendar 
    name="PublishDate" 
    [(ngModel)]="resource.PublishDate" 
    dateFormat="mm/dd/yy" 
    [showIcon]="true"
    [showTime]="false"> <!-- 强制隐藏时间部分 -->
  </p-calendar>
</div>

额外注意事项 #

1. 数据结构类型修正：建议将IResource改为interface而非class，因为它仅用于定义数据结构，不需要实例化：

export interface IResource { 
  ResourceId: number; 
  ResourceTitle: string; 
  Description: string; 
  PublishDate?: Date; 
  ImgUrl: string; 
}

2. 时区问题处理：如果API返回的日期包含时区偏移，转换时可以添加Z来确保正确解析为UTC时间后转换为本地时间：

response.PublishDate = new Date(response.PublishDate + 'Z');

内容的提问来源于stack exchange，提问作者MALIK MAHSAM KHAN