> **The example application is on [GitHub Pages](https://kuhnroyal.github.io/mat-datetimepicker/)!**
npm install @mat-datetimepicker/moment> 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
.
- Usage
- Development
Install:
``sh`
npm install --save @mat-datetimepicker/core
And for the moment adapter:
`sh`
npm install --save @angular/material-moment-adapter @mat-datetimepicker/moment
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,
];
`html`
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.
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" |aria-label
| ariaPrevMonthLabel | for the Previous button in the month mode | "Previous month" |aria-label
| ariaNextYearLabel | for the Next button in the year mode | "Next year" |aria-label
| ariaPrevYearLabel | for the Previous button in the year mode | "Previous year" |
The component supports property bindings or pipes with the aria- values.
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
`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
`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
Run npm install in order to install all required dependencies and initialize the Git hooks. Further instructions areDEVELOPMENT.md`.
available in the
**Make sure you read at
least the "Committing" section
before committing anything.**