Material Datetimepicker for @angular/material

> The example application is on GitHub Pages!


---

The datetimepicker was initially taken from Promact/md2 and modified to
use @angular/material. We have also added theming support.

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

Contents

- Usage
- Development

Usage

Installation

Install:

``sh
npm install --save @mat-datetimepicker/core
`

And for the moment adapter:

`sh
npm install --save @angular/material-moment-adapter @mat-datetimepicker/moment
`

Setup

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

`ts
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

`html




Start DateTime
[for]="datetimePicker"
matSuffix
>
#datetimePicker
type="datetime"
openOnFocus="true"
timeInterval="5"
>

matInput
formControlName="start"
[matDatetimepicker]="datetimePicker"
required
autocomplete="false"
/>




`

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.

$3

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

`ts
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

$3

`ts
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

`scss
@use '@mat-datetimepicker/core/datetimepicker/datetimepicker-theme.scss';

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

@see src/styles.scss

Development

Run npm install in order to install all required dependencies and initialize the Git hooks. Further instructions are
available in the DEVELOPMENT.md`.

**Make sure you read at
least the "Committing" section
before committing anything.**