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
Installation
Install:npm install --save @mat-datetimepicker/core
And for the moment adapter:
npm install --save @angular/material-moment-adapter 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 ofMAT_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
, datetime
and 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 documentationMoment
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 documentationTheming
@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
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.