如何从 mat-date-picker 和 mat select with time 中获取日期？答案

【问题标题】：How to get a Date from a mat-date-picker and a mat select with time?如何从 mat-date-picker 和 mat select with time 中获取日期？
【发布时间】：2021-09-15 13:25:47
【问题描述】：

我正在使用 Angular 日历来显示一些事件。所以每个事件都有这些参数：

event:{
    title: string,
    start: Date,
    end: Date
};

由于材料没有日期时间选择器，我使用单独的日期选择器来选择日期，然后选择时间（8AM-18AM 范围）。我有这样的事情：

  <div class = "date-picker">

    <mat-form-field appearance="fill">
      <mat-label>Seleziona giorno</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>Orario</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>

我想从两者中“创建”一个综合时间的日期，我该怎么做？

日期格式是这样的：

新日期(2021, 6, 1, 12, 30, 0, 0)

在我的 .ts 文件中，我很简单：

this.event = {
      start: new Date(this.date.getFullYear(), this.date.getUTCMonth(), this.date.getUTCDay(), this.time, 0, 0, 0),

等等...}

我需要从“日期”和“时间”开始成为正确的日期格式谢谢

【问题讨论】：

包含您的 component.ts 文件。字段/属性date 和time 就在那里，它们是您可能需要用来构建日期的东西。
我在问题中进行了编辑

标签： angular typescript ionic-framework

【解决方案1】：

getDay 是星期几。你想要getDate。如果您希望使用本地时区，请不要使用 UTC 版本（这样做是因为日历将使用该时区）。

试试这个表达式：

new Date(this.date.getFullYear(), this.date.getMonth(), this.date.getDate(), this.time)

这也假设您的 times 是一组从 0 到 23 的值。

【讨论】：