Material Datetimepicker for @angular/material 10.x

This is the main branch for @angular/material 10.x

You can find the Angular 5 version on the 1.x branch.
You can find the Angular 6 version on the 2.x branch.
You can find the Angular 8 version on the 3.x branch.
You can find the Angular 9 version on the 4.x branch.
You can find the Angular 10 version on the 5.x branch.

Description

The datetimepicker is taken from Promact/md2 and modified to use @angular/material as base and added theming support.

Like the @angular/material datepicker it contains a native-datetime-adapter as well as a moment-datetime-adapter.

Usage

Installation

Install:

yarn add @mat-datetimepicker/core

And for the moment adapter:

yarn add @angular/material-moment-adapter
yarn add @mat-datetimepicker/moment

Setup

Basically the same way the @angular/material datepicker is configured and imported.

imports: [
  ...
  MatDatepickerModule,
  // use this if you want to use native javascript dates and INTL API if available
  // MatNativeDatetimeModule,
  MatMomentDatetimeModule,
  MatDatetimepickerModule
]

@see src/app/app.module.ts

Using the component

<form [formGroup]="group">
  <mat-form-field>
    <mat-placeholder>Start DateTime</mat-placeholder>
    <mat-datetimepicker-toggle [for]="datetimePicker" matSuffix></mat-datetimepicker-toggle>
    <mat-datetimepicker
      #datetimePicker
      type="datetime"
      openOnFocus="true"
      timeInterval="5">
    </mat-datetimepicker>
    <input
      matInput
      formControlName="start"
      [matDatetimepicker]="datetimePicker"
      required
      autocomplete="false">
  </mat-form-field>
</form>

Date formatting

In order to change the default input/output formats, a custom instance of MAT_DATETIME_FORMATS needs to be provided in the global configuration.

Input/output formats can be changed separately for the existing datetime picker types date, month , datetimeand time.

Accessibility

You can use the following properties to provide values for ARIA- attributes:

Property	Description	Default
ariaNextMonthLabel	aria-label for the Next button in the month mode	"Next month"
ariaPrevMonthLabel	aria-label for the Previous button in the month mode	"Previous month"
ariaNextYearLabel	aria-label for the Next button in the year mode	"Next year"
ariaPrevYearLabel	aria-label for the Previous button in the year mode	"Previous year"

The component supports property bindings or pipes with the aria- values.

Native

Parsing does not work with the native adapter because the Intl.DateTimeFormat API does not provide that feature.

  providers: [
    {
      provide: MAT_DATETIME_FORMATS,
      useValue: {
        parse: {},
        display: {
          dateInput: {
            year: "numeric",
            month: "2-digit",
            day: "2-digit"
          },
          monthInput: {
            month: "long"
          },
          datetimeInput: {
            year: "numeric",
            month: "2-digit",
            day: "2-digit",
            hour: "2-digit",
            minute: "2-digit"
          },
          timeInput: {
            hour: "2-digit",
            minute: "2-digit"
          },
          monthYearLabel: {
            year: "numeric",
            month: "short"
          },
          dateA11yLabel: {
            year: "numeric",
            month: "long",
            day: "numeric"
          },
          monthYearA11yLabel: {
            year: "numeric",
            month: "long"
          },
          popupHeaderDateLabel: {
            weekday: "short",
            month: "short",
            day: "2-digit"
          }
        }
      }
    }
  ]

@see defaults in native-datetime-formats.ts
@see Intl.DateTimeFormat API documentation

Moment

  providers: [
    {
      provide: MAT_DATETIME_FORMATS,
      useValue: {
        parse: {
          dateInput: "L",
          monthInput: "MMMM",
          timeInput: "LT",
          datetimeInput: "L LT"
        },
        display: {
          dateInput: "L",
          monthInput: "MMMM",
          datetimeInput: "L LT",
          timeInput: "LT",
          monthYearLabel: "MMM YYYY",
          dateA11yLabel: "LL",
          monthYearA11yLabel: "MMMM YYYY",
          popupHeaderDateLabel: "ddd, DD MMM"
        }
      }
    }
  ]

@see defaults in moment-datetime-formats.ts
@see moment.js documentation

Theming

@import '~@mat-datetimepicker/core/datetimepicker/datetimepicker-theme.scss';

// Using the $theme variable from the pre-built theme you can call the theming function
@include mat-datetimepicker-theme($theme);

@see src/styles.scss

Development

Performing a local build

yarn install
yarn build

Running the sample app locally

yarn install
yarn build
yarn start

Using the local build in some project

cd my-project

Add the dependencies to your package.json:

"dependencies": {
    "@mat-datetimepicker/core": "4.0.0",
    "@mat-datetimepicker/moment": "4.0.0",
}

Link the local built modules:

yarn link "@mat-datetimepicker/core"
yarn link "@mat-datetimepicker/moment"