Angular Date Picker无法获取选中日期，始终传递当前日期至后端

问题根源分析 #

你遇到的核心问题是日期选择器的选中值没有同步到组件的startDate/endDate变量，导致调用接口时始终传递初始化的当前日期；另外服务端的参数传递格式也可能存在解析问题。

分步解决方案 #

1. 确保日期选择器与组件变量双向绑定 #

无论你使用Angular原生表单还是Material Datepicker，必须保证选中日期能同步更新组件内的日期变量：

方式一：使用ngModel双向绑定（模板驱动表单）

模板代码示例：

<!-- 开始日期选择器 -->
<mat-form-field>
  <input matInput [matDatepicker]="startPicker" [(ngModel)]="startDate" placeholder="开始日期">
  <mat-datepicker-toggle matSuffix [for]="startPicker"></mat-datepicker-toggle>
  <mat-datepicker #startPicker></mat-datepicker>
</mat-form-field>

<!-- 结束日期选择器 -->
<mat-form-field>
  <input matInput [matDatepicker]="endPicker" [(ngModel)]="endDate" placeholder="结束日期">
  <mat-datepicker-toggle matSuffix [for]="endPicker"></mat-datepicker-toggle>
  <mat-datepicker #endPicker></mat-datepicker>
</mat-form-field>

<button (click)="getAttendanceForPeriod(startDate, endDate)">查询考勤</button>

组件类中需初始化变量：

startDate: Date = new Date();
endDate: Date = new Date();

方式二：使用响应式表单

组件类代码：

import { FormGroup, FormControl } from '@angular/forms';

// 初始化表单
attendanceForm = new FormGroup({
  startDate: new FormControl(new Date()),
  endDate: new FormControl(new Date())
});

getAttendanceForPeriod() {
  // 从表单控件获取最新选中日期
  const startDate = this.attendanceForm.get('startDate')?.value;
  const endDate = this.attendanceForm.get('endDate')?.value;
  
  if (startDate && endDate) {
    this.apiService.getAttendanceForPeriod(startDate, endDate)
      .subscribe(result => this.dataSource = result.payload);
  }
}

模板代码：

<form [formGroup]="attendanceForm">
  <mat-form-field>
    <input matInput [matDatepicker]="startPicker" formControlName="startDate">
    <mat-datepicker-toggle matSuffix [for]="startPicker"></mat-datepicker-toggle>
    <mat-datepicker #startPicker></mat-datepicker>
  </mat-form-field>

  <mat-form-field>
    <input matInput [matDatepicker]="endPicker" formControlName="endDate">
    <mat-datepicker-toggle matSuffix [for]="endPicker"></mat-datepicker-toggle>
    <mat-datepicker #endPicker></mat-datepicker>
  </mat-form-field>

  <button (click)="getAttendanceForPeriod()">查询考勤</button>
</form>

2. 修正服务端参数传递格式 #

当前服务代码将参数嵌套在params对象中，后端可能无法正确解析，需根据后端接收方式调整：

情况一：后端接收请求体参数

public getAttendanceForPeriod(startDate: Date, endDate: Date) {
  return this.http.post<any>(
    '/attendance/get-attendance-for-period',
    {
      startDate: startDate.toISOString(),
      endDate: endDate.toISOString()
    }
  );
}

情况二：后端接收URL查询参数

import { HttpParams } from '@angular/common/http';

public getAttendanceForPeriod(startDate: Date, endDate: Date) {
  const params = new HttpParams()
    .set('startDate', startDate.toISOString())
    .set('endDate', endDate.toISOString());
  
  return this.http.post<any>(
    '/attendance/get-attendance-for-period',
    {}, // POST请求体可留空
    { params }
  );
}

关键验证点 #

• 调用getAttendanceForPeriod前，先打印startDate和endDate的值，确认是否为选中日期
• 检查浏览器网络请求的参数，确认传递的日期是否正确

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