Angular+Ionic合并日期时间输入报错：.getFullYear() is not a function

问题原因 #

• 模板中ngModel绑定语法错误，Angular模板里绑定组件属性不需要加this，[(ngModel)]="this.DataPrenotazione"这种写法会导致变量绑定异常，可能使DataPrenotazione无法成为有效的Date对象。
• ngx-timepicker-field默认返回的不是Date对象（通常是HH:mm格式的字符串或自定义时间类型），直接调用time.getHours()自然会触发类型错误。

解决方案 #

1. 修正模板绑定语法 #

去掉ngModel中的this，修改后的模板代码：

<ion-item>
  <mat-form-field>
    <mat-label>Data Appuntamento</mat-label>
    <input matInput [matDatepicker]="picker" [(ngModel)]="DataPrenotazione">
    <mat-hint>DD/MM/YYYY</mat-hint>
    <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
  <ion-label>Ora Appuntamento</ion-label>
  <ngx-timepicker-field [format]="24" [(ngModel)]="OraPrenotazione" [minutesGap]="15"></ngx-timepicker-field>
</ion-item>

2. 适配ngx-timepicker-field的返回值类型 #

方案A：处理字符串类型的时间值

如果ngx-timepicker-field返回的是HH:mm格式的字符串，修改合并函数解析时间：

combineDateTime(date: Date, timeStr: string): Date {
  // 校验输入有效性
  if (!date || !(date instanceof Date) || !timeStr) {
    throw new Error('无效的日期或时间输入');
  }

  // 拆分时间字符串为小时和分钟
  const [hours, minutes] = timeStr.split(':').map(Number);
  
  // 基于传入日期创建新对象，避免修改原日期实例
  const combinedDateTime = new Date(date);
  combinedDateTime.setHours(hours);
  combinedDateTime.setMinutes(minutes);
  combinedDateTime.setSeconds(0); // 可选：重置秒数
  combinedDateTime.setMilliseconds(0); // 可选：重置毫秒数

  return combinedDateTime;
}

方案B：配置组件返回Date对象

查看ngx-timepicker-field文档，若支持返回Date对象，添加对应输入属性（比如returnDate）：

<ngx-timepicker-field [format]="24" [(ngModel)]="OraPrenotazione" [minutesGap]="15" [returnDate]="true"></ngx-timepicker-field>

此时组件类中需声明变量类型：

OraPrenotazione: Date;

原合并函数可保留，但建议添加类型校验：

combineDateTime(date: Date, time: Date): Date {
  if (!date || !(date instanceof Date) || !time || !(time instanceof Date)) {
    throw new Error('日期或时间必须为有效的Date对象');
  }

  const combinedDateTime = new Date(date);
  combinedDateTime.setHours(time.getHours());
  combinedDateTime.setMinutes(time.getMinutes());
  combinedDateTime.setSeconds(0);
  combinedDateTime.setMilliseconds(0);
  return combinedDateTime;
}

3. 初始化组件变量 #

在组件类中提前初始化变量，避免初始值为undefined：

DataPrenotazione: Date;
OraPrenotazione: string; // 或Date，根据所选方案调整

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