Angular中.toJSON()转日期为UTC，如何发送有效日期？

我之前在项目里也踩过这个坑！Angular里默认调用toJSON()时，确实会把本地时间转成UTC格式，导致后端拿到的日期和你选的不一样。这里有几个实用的解决办法，你可以根据项目情况选：

方法一：自定义全局HTTP拦截器（推荐） #

这个方法能全局处理所有请求里的日期对象，不用每个请求都手动改，非常省心。

你可以创建一个HTTP拦截器，遍历请求体里的所有属性，把Date类型的对象转换成你需要的格式（比如纯日期的YYYY-MM-DD，或者带本地时间的ISO字符串）：

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

@Injectable()
export class DateInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 如果请求有body，才处理日期转换
    if (req.body) {
      const clonedRequest = req.clone({
        body: this.transformDates(req.body)
      });
      return next.handle(clonedRequest);
    }
    return next.handle(req);
  }

  private transformDates(obj: any): any {
    // 处理单个Date对象
    if (obj instanceof Date && !isNaN(obj.getTime())) {
      // 这里改成你需要的格式：
      // 例1：纯日期格式YYYY-MM-DD
      return obj.toLocaleDateString('en-CA');
      // 例2：带本地时间的ISO字符串（避免UTC转换）
      // return new Date(obj.getTime() - obj.getTimezoneOffset() * 60000).toISOString();
    }
    // 递归处理对象/数组里的日期
    if (typeof obj === 'object' && obj !== null) {
      for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
          obj[key] = this.transformDates(obj[key]);
        }
      }
    }
    return obj;
  }
}

然后在你的根模块（比如AppModule）里注册这个拦截器：

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 {}

方法二：手动转换单个请求的日期 #

如果只是个别请求需要处理日期，不想全局改的话，可以在发送请求前手动把日期对象转成目标格式：

// 假设this.selectedDate是datepicker返回的Date对象
const requestPayload = {
  eventDate: this.selectedDate.toLocaleDateString('en-CA'), // 转成YYYY-MM-DD
  // 如果你用了moment.js/date-fns这类日期库，写法更简洁：
  // eventDate: moment(this.selectedDate).format('YYYY-MM-DD')
};

// 发送请求
this.http.post('/api/events', requestPayload).subscribe(
  response => console.log('请求成功'),
  error => console.error('请求失败', error)
);

方法三：配置Angular Material Datepicker的适配器（针对Material组件） #

如果你用的是Angular Material的Datepicker，可以通过配置DateAdapter来让组件返回更易处理的日期格式，避免后续的UTC转换问题：

首先安装依赖（如果用moment的话）：

npm install moment @angular/material-moment-adapter

然后创建一个自定义的日期配置模块：

import { NgModule } from '@angular/core';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import { MomentDateAdapter } from '@angular/material-moment-adapter';
import * as moment from 'moment';

// 自定义日期格式
export const CUSTOM_DATE_FORMATS = {
  parse: {
    dateInput: 'YYYY-MM-DD',
  },
  display: {
    dateInput: 'YYYY-MM-DD',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

@NgModule({
  providers: [
    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE]
    },
    { provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS },
  ],
})
export class CustomDatepickerModule {}

把这个模块导入到你的功能模块里，这样Datepicker返回的就是moment对象，后续转换格式会更灵活。

额外提醒 #

不管用哪种方法，记得和后端同事确认好日期格式的约定——比如前端发YYYY-MM-DD，后端要按这个格式解析，而不是默认的UTC时间，这样两端的日期才能对齐。

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