Angular Material Datepicker仅获取日期：去除时间戳及本地化存储问题

我来帮你搞定这个时区导致的日期问题！Angular Material Datepicker默认返回带时区信息的Date对象，这确实会让API接收到和本地日期不匹配的UTC时间（比如你选本地4月11日0点，API收到的是UTC前一天的22点）。下面是几种实用的解决思路，你可以根据项目情况选：

这是最彻底的方案，让Datepicker从根源上使用本地日期逻辑，避免时区转换干扰。

步骤1：创建自定义DateAdapter #

继承Angular Material的NativeDateAdapter，重写格式化和解析方法，只保留本地日期部分：

import { NativeDateAdapter } from '@angular/material/core';
import { Injectable } from '@angular/core';

@Injectable()
export class LocalDateAdapter extends NativeDateAdapter {
  // 格式化日期为本地格式（比如DD.MM.YYYY）
  override format(date: Date, displayFormat: Object): string {
    const day = date.getDate().toString().padStart(2, '0');
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const year = date.getFullYear();
    return `${day}.${month}.${year}`;
  }

  // 解析用户输入的日期字符串为本地Date对象
  override parse(value: any): Date | null {
    if (typeof value === 'string') {
      const [day, month, year] = value.split('.').map(Number);
      const date = new Date(year, month - 1, day);
      // 验证日期有效性，避免无效输入
      if (date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day) {
        return date;
      }
    }
    return super.parse(value);
  }
}

步骤2：在模块中配置使用自定义适配器 #

同时定义你需要的日期格式：

import { NgModule } from '@angular/core';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import { LocalDateAdapter } from './local-date-adapter';

// 定义日期格式规则
export const MY_DATE_FORMATS = {
  parse: {
    dateInput: 'DD.MM.YYYY',
  },
  display: {
    dateInput: 'DD.MM.YYYY',
    monthYearLabel: 'MMMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

@NgModule({
  providers: [
    { provide: DateAdapter, useClass: LocalDateAdapter },
    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS },
  ],
})
export class AppMaterialModule { }

配置完成后，Datepicker返回的Date对象会严格对应本地选中的日期，不会被时区转换偏移。

如果不想改动全局配置，可以在提交API前临时处理日期值：

// 获取表单中的Date对象
const selectedDate = this.form.get('start')?.value as Date;

// 方案A：转成本地日期字符串（直接传给API）
const localDateStr = `${selectedDate.getDate().toString().padStart(2, '0')}.${(selectedDate.getMonth()+1).toString().padStart(2, '0')}.${selectedDate.getFullYear()}`;

// 方案B：创建一个UTC日期，让UTC日期部分和本地日期一致
// 这样API收到的UTC时间会是"2018-04-11T00:00:00Z"，对应本地4月11日0点
const adjustedUtcDate = new Date(Date.UTC(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate()));

如果你的项目已经引入了Moment.js，直接用MomentDateAdapter会更省心：

步骤1：安装依赖 #

npm install @angular/material-moment-adapter moment

步骤2：配置模块 #

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

export const MY_MOMENT_DATE_FORMATS = {
  parse: {
    dateInput: 'DD.MM.YYYY',
  },
  display: {
    dateInput: 'DD.MM.YYYY',
    monthYearLabel: 'MMMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

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

步骤3：在组件中处理日期 #

Datepicker会返回Moment对象，你可以轻松转成本地日期：

const selectedMoment = this.form.get('start')?.value as moment.Moment;
const localDateStr = selectedMoment.format('DD.MM.YYYY');
// 或者转成Date对象
const localDate = selectedMoment.toDate();

简单说，本质问题是JavaScript的Date对象底层是UTC时间戳，我们要做的就是让它的表现完全贴合本地日期逻辑，上面三种方法都能解决这个问题～

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