组合两个输入是一个日期对象

Question

我的应用程序中有两个输入，我试图将它们组合在一个对象中（因为服务器需要一个对象）

模板：

<ion-item>
            
            <mat-form-field>
                <mat-label>Data Appuntamento</mat-label>
                <input matInput [matDatepicker]="picker" [(ngModel)]="this.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)]="this.OraPrenotazione" [minutesGap]="15"></ngx-timepicker-field>
            
        </ion-item>

然后我调用它来组合输入：

combineDateTime(date: Date, time: Date): Date {
        const combinedDateTime = new Date();
        combinedDateTime.setFullYear(date.getFullYear());
        combinedDateTime.setMonth(date.getMonth());
        combinedDateTime.setDate(date.getDate());
        combinedDateTime.setHours(time.getHours());
        combinedDateTime.setMinutes(time.getMinutes());
        return combinedDateTime;
    }

当我尝试调用组合函数时，我得到“.getFullYear() 不是函数”

this.combineDateTime(this.DataPrenotazione, this.OraPrenotazione)

Answer 1

我们从时间选择器获得的输出为

02:30

，因此我们需要相应地分割它。我们可以对

:

进行字符串分割，然后使用一元

+

将分割后的字符串转换为数字，最后设置小时和分钟！

  combineDateTime(date: Date, time: string): Date {
    const combinedDateTime = new Date();
    combinedDateTime.setFullYear(date.getFullYear());
    combinedDateTime.setMonth(date.getMonth());
    combinedDateTime.setDate(date.getDate());
    const [hours, minutes] = time.includes(':') ? time.split(':') : [0, 0];
    combinedDateTime.setHours(+hours);
    combinedDateTime.setMinutes(+minutes);
    return combinedDateTime;
  }

完整代码：

TS：

import { Component } from '@angular/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { provideNativeDateAdapter } from '@angular/material/core';
import { FormsModule } from '@angular/forms';
import { NgxMaterialTimepickerModule } from 'ngx-material-timepicker';
import { CommonModule } from '@angular/common';

/** @title Basic datepicker */
@Component({
  selector: 'datepicker-overview-example',
  templateUrl: 'datepicker-overview-example.html',
  standalone: true,
  providers: [provideNativeDateAdapter()],
  imports: [
    MatFormFieldModule,
    MatInputModule,
    MatDatepickerModule,
    FormsModule,
    NgxMaterialTimepickerModule,
    CommonModule,
  ],
})
export class DatepickerOverviewExample {
  OraPrenotazione: string = '00:00';
  DataPrenotazione: Date = new Date();
  combinedDateTime: any = null;

  combineDateTime(date: Date, time: string): Date {
    const combinedDateTime = new Date();
    combinedDateTime.setFullYear(date.getFullYear());
    combinedDateTime.setMonth(date.getMonth());
    combinedDateTime.setDate(date.getDate());
    const [hours, minutes] = time.includes(':') ? time.split(':') : [0, 0];
    combinedDateTime.setHours(+hours);
    combinedDateTime.setMinutes(+minutes);
    return combinedDateTime;
  }
}

HTML：

<mat-form-field>
  <mat-label>Data Appuntamento</mat-label>
  <input
    matInput
    [matDatepicker]="picker"
    [(ngModel)]="this.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>
<label>Ora Appuntamento</label>
<ngx-timepicker-field
  [format]="24"
  [(ngModel)]="this.OraPrenotazione"
  [minutesGap]="15"
></ngx-timepicker-field>

<button
  (click)="combinedDateTime = combineDateTime(DataPrenotazione, OraPrenotazione)"
>
  combine
</button>

Final DATE: {{combinedDateTime | date : 'full'}}

Stackblitz 演示