咨询Angular Material是否有官方带时间选择的日期选择器组件

Hey Kevin, I totally get where you're coming from—third-party date-time pickers can feel bloated and hard to slot into your existing Angular Material setup. The good news is that Angular Material has official support for combining date and time selection directly in the calendar flow (no third-party tools required), as long as you're on a recent version (v15+).

Here's how you can set it up cleanly and avoid the complexity of external libraries:

1. Combine MatDatepicker + MatTimepicker Natively #

The official MatTimepicker integrates seamlessly with MatDatepicker by binding both to the same form control. This lets users pick a date from the calendar first, then select a time—all tied to a single Date value, with zero extra dependencies.

Template Example #

<mat-form-field appearance="fill">
  <mat-label>Date & Time</mat-label>
  <input
    matInput
    [matDatepicker]="datePicker"
    [matTimepicker]="timePicker"
    formControlName="dateTime"
  >
  <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>

Component Setup #

In your component class, you'll just need a standard form control, and you can customize the date-time display/parse format using Angular Material's MAT_DATE_FORMATS provider:

import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { MAT_DATE_FORMATS } from '@angular/material/core';
import { MomentDateAdapter } from '@angular/material-moment-adapter';
import { DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';
import * as moment from 'moment';

// Custom date-time format (adjust to your preferred style)
export const MY_DATE_TIME_FORMATS = {
  parse: {
    dateInput: 'YYYY-MM-DD HH:mm',
  },
  display: {
    dateInput: 'YYYY-MM-DD HH:mm',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

@Component({
  selector: 'app-date-time-picker',
  templateUrl: './date-time-picker.component.html',
  styleUrls: ['./date-time-picker.component.css'],
  providers: [
    { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_TIME_FORMATS },
  ],
})
export class DateTimePickerComponent {
  form = new FormGroup({
    dateTime: new FormControl(moment())
  });
}

2. Key Tips to Avoid Headaches #

• Version Check: Ensure you're on Angular Material 15 or later—MatTimepicker became a stable, fully integrated component in this release. If you're on an older version, upgrading will save you from dealing with clunky workarounds.
• Style Consistency: Since both components are part of Angular Material, they'll match your existing theme out of the box—no extra CSS tweaks needed to align with your app's design.
• Value Management: The form control will hold a single moment (or native Date, if you prefer the native date adapter) object that includes both date and time, making it easy to work with in your business logic.

Why This Beats Third-Party Components #

You won't have to deal with conflicting dependencies, inconsistent UI, or extra maintenance work from external libraries. The official integration is lightweight, well-documented, and supported long-term by the Angular team—exactly what you need for a clean, maintainable setup.

内容的提问来源于stack exchange，提问作者Kevin Curnow