Angular中FormControl日期转Date对象出现1970初始日期问题求助

问题重现 #

HTML代码 #

<form [formGroup]="searchForm" (ngSubmit)="search()">
  <div class="row">
    <div class="col">
      <input type="date" class="form-control" formControlName="startDate" >
    </div>
    <div class="col">
      <input type="date" class="form-control" formControlName="endDate" >
    </div>
    <div class="col">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

TypeScript代码 #

searchForm = new FormGroup({
    startDate: new FormControl(),
    endDate: new FormControl(),
  }
);

问题描述 #

直接打印this.searchForm.value.startDate时，输出为2022-12-31，符合预期。但执行startDate = new Date(this.searchForm.value.startDate)转换为Date对象时，结果却是1970-01-01T00:00:00。

原因分析 #

核心问题是：input[type="date"]返回的YYYY-MM-DD格式字符串，在部分JavaScript环境或旧版浏览器中，Date构造函数对这种仅含日期的ISO字符串解析存在时区或逻辑差异，导致无法正确识别日期，最终返回代表时间起点的Epoch时间（1970-01-01）。

解决方法 #

方法1：拆分日期字符串手动构造Date对象 #

这是最可靠的方式，完全避免解析歧义：

const dateStr = this.searchForm.value.startDate;
if (dateStr) {
  const [year, month, day] = dateStr.split('-').map(Number);
  // 注意：Date构造函数的月份是0-based（0对应1月，11对应12月）
  const startDate = new Date(year, month - 1, day);
  console.log(startDate); // 输出正确的Date对象
}

方法2：给日期字符串补充时间后缀 #

通过添加T00:00:00明确时间部分，让Date构造函数能准确解析：

const dateStr = this.searchForm.value.startDate;
if (dateStr) {
  const startDate = new Date(`${dateStr}T00:00:00`);
  console.log(startDate);
}

方法3：配置FormControl直接返回Date对象 #

初始化表单时添加值转换逻辑，让控件直接返回Date类型：

searchForm = new FormGroup({
  startDate: new FormControl(null),
  endDate: new FormControl(null)
});

// 监听日期控件值变化，自动转换为Date对象
this.searchForm.get('startDate')?.valueChanges.subscribe(dateStr => {
  if (dateStr) {
    const [year, month, day] = dateStr.split('-').map(Number);
    this.searchForm.get('startDate')?.setValue(new Date(year, month - 1, day), { emitEvent: false });
  }
});

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