如何从Angular Material日期选择器中获取当前时间？

嘿，我刚好碰到过类似的需求，Angular Material的日期选择器默认确实只返回日期部分（时间会被设为00:00:00），不过有几种实用的办法能让它同时获取时间，我给你梳理下常用的方案：

方案一：结合内置时间选择器（MatTimepicker） #

如果你的Angular Material版本支持（一般v12及以上都有），可以直接把日期选择器和时间选择器绑定到同一个表单控件，让用户同时选择日期和时间：

1. 先确保模块中导入了所需的组件：

import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { MatTimepickerModule } from '@angular/material/timepicker';

@NgModule({
  imports: [
    // ...其他模块
    MatDatepickerModule,
    MatNativeDateModule,
    MatTimepickerModule
  ]
})
export class YourModule { }

2. 在模板中组合两个选择器：

<mat-form-field appearance="fill">
  <input 
    matInput 
    [matDatepicker]="datePicker" 
    [matTimepicker]="timePicker" 
    formControlName="dateTime"
    placeholder="选择日期和时间"
  >
  <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
  <mat-datepicker #datePicker></mat-datepicker>
  <mat-timepicker-toggle matSuffix [for]="timePicker"></mat-timepicker-toggle>
  <mat-timepicker #timePicker></mat-timepicker>
</mat-form-field>

这样用户选择完成后，表单控件dateTime的值就是包含具体日期和时间的Date对象了，比如Mon May 28 2018 14:30:45 GMT+0530 (IST)。

方案二：自动拼接当前时间到选中日期 #

如果不需要用户手动选择时间，只想自动把当前系统时间拼接到选中的日期上，可以通过监听日期选择事件来处理：

1. 模板中添加日期选择器并绑定dateChange事件：

<mat-form-field appearance="fill">
  <input 
    matInput 
    [matDatepicker]="datePicker" 
    (dateChange)="handleDateSelect($event)"
    placeholder="选择日期"
  >
  <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
  <mat-datepicker #datePicker></mat-datepicker>
</mat-form-field>

2. 在组件类中实现事件处理方法：

import { MatDatepickerInputEvent } from '@angular/material/datepicker';

// ...组件其他代码
handleDateSelect(event: MatDatepickerInputEvent<Date>) {
  if (event.value) {
    const currentTime = new Date();
    // 将当前时间的时分秒毫秒赋值给选中的日期
    event.value.setHours(currentTime.getHours());
    event.value.setMinutes(currentTime.getMinutes());
    event.value.setSeconds(currentTime.getSeconds());
    event.value.setMilliseconds(currentTime.getMilliseconds());
    
    // 这里可以把处理后的日期存到变量或表单控件中
    console.log('带当前时间的日期:', event.value);
  }
}

这种方式不需要额外的时间选择器，适合只需要记录用户选择日期时的当前时间的场景。

注意事项 #

• 如果你的Angular Material版本较低没有MatTimepicker，可以考虑引入第三方时间选择器组件，或者自己实现简单的时间输入框来拼接。
• 处理日期时要注意时区问题，确保最终的日期时间符合你的业务需求。

内容的提问来源于stack exchange，提问作者ian dsouza