如何将日期字符串转换为Date对象用于Angular mat-datepicker配置

1. 日期字符串转Date对象 #

你拿到的字符串格式是JS原生Date对象的标准输出格式，直接传入Date构造函数即可完成转换，不需要额外引入第三方解析库：

// 示例原始日期字符串
const rawDateStr = 'Fri Aug 27 2021 00:00:00 GMT+0530 (India Standard Time)';
// 直接转换为Date对象
const originDate = new Date(rawDateStr);

可通过!isNaN(originDate.getTime())判断日期是否转换成功，避免非法字符串导致的异常。

2. 给日期添加指定天数 #

直接操作时间戳即可，可规避夏令时、跨月/跨年等边界问题，同时不会修改原日期对象：

function addDays(date: Date, days: number): Date {
  const result = new Date(date);
  // 按毫秒数累加对应天数的时间
  result.setTime(result.getTime() + days * 24 * 60 * 60 * 1000);
  return result;
}

// 示例：给原始日期添加7天
const targetDate = addDays(originDate, 7);

3. 绑定到Angular mat-datepicker组件 #

先确认对应模块已经导入了MatDatepickerModule和对应的日期适配器模块（常用的为MatNativeDateModule或MomentDateModule）。

组件TS代码示例 #

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-date-demo',
  templateUrl: './date-demo.component.html'
})
export class DateDemoComponent implements OnInit {
  // 从用户侧获取的原始日期字符串
  rawUserDate = 'Fri Aug 27 2021 00:00:00 GMT+0530 (India Standard Time)';
  // 绑定目标datepicker的表单控件
  calculatedDateControl = new FormControl();

  ngOnInit(): void {
    const originDate = new Date(this.rawUserDate);
    if (!isNaN(originDate.getTime())) {
      // 计算添加7天后的日期
      const targetDate = new Date(originDate);
      targetDate.setTime(targetDate.getTime() + 7 * 24 * 60 * 60 * 1000);
      // 赋值给表单控件，datepicker会自动识别渲染
      this.calculatedDateControl.setValue(targetDate);
    }
  }
}

组件HTML模板示例 #

<mat-form-field appearance="fill">
  <mat-label>计算后日期</mat-label>
  <input 
    matInput 
    [matDatepicker]="targetDatePicker" 
    [formControl]="calculatedDateControl"
  >
  <mat-datepicker-toggle matSuffix [for]="targetDatePicker"></mat-datepicker-toggle>
  <mat-datepicker #targetDatePicker></mat-datepicker>
</mat-form-field>

注意：如果你项目使用的是MomentDateAdapter而非原生日期适配器，赋值前需要将Date对象转为Moment对象，调用moment(targetDate)即可完成转换。

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