I am currently utilizing Angular calendar to display various events. Each event is defined by the following parameters:
event:{
title: string,
start: Date,
end: Date
};
As material design does not offer a date-time picker, I have opted for using a separate datepicker to choose the date and then a mat select for selecting the time within an 8AM-6PM range. The setup looks similar to this:
<div class = "date-picker">
<mat-form-field appearance="fill">
<mat-label>Select day</mat-label>
<input matInput [matDatepicker]="picker" [(ngModel)]="date" name = "date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</div>
<div class ="time-picker">
<mat-form-field appearance="fill">
<mat-label>Time</mat-label>
<mat-select [(ngModel)]="time" name = "time">
<mat-option *ngFor="let time of times" [value]="time">{{time}}</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
I want to combine the selected "date" and "time" values into one complete Date object, how can I achieve that?
The expected date format would be:
new Date(2021, 6, 1, 12, 30, 0, 0)
In my .ts file, I simply do:
this.event = {
start: new Date(this.date.getFullYear(), this.date.getUTCMonth(), this.date.getUTCDay(), this.time, 0, 0, 0),
etc...}
I need the "start" parameter to represent a proper Date format combining the "date" and "time" values.