combine two inputs is a single date object

Question

I have two inputs in my application and i'm trying to combine them in a single object (cuz the server expect a single object)

template:

<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>

i then call this to combine the inputs:

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;
    }

when i try to call the combine function i get the ".getFullYear() is not a function"

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

Answer 1

We are getting the output from the timepicker as 02:30 so we need to split it accordingly. We can use string split on :, then use the unary + to convert the split string to number and finally set the hours and minutes!

  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;
  }

FULL CODE:

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 Demo