Skip to content

docs(moment-date-adapter): document formats #16463

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 32 additions & 1 deletion src/material/datepicker/datepicker.md
Original file line number Diff line number Diff line change
Expand Up @@ -262,7 +262,7 @@ requires. This is accomplished by subclassing `DateAdapter` and providing your s
`DateAdapter` implementation. You will also want to make sure that the `MAT_DATE_FORMATS` provided
in your app are formats that can be understood by your date implementation. See
[_Customizing the parse and display formats_](#customizing-the-parse-and-display-formats)for more
information about `MAT_DATE_FORMATS`. <!-- TODO(mmalerba): Add a guide about this -->
information about `MAT_DATE_FORMATS`.

```ts
@NgModule({
Expand Down Expand Up @@ -298,6 +298,37 @@ export class MyApp {}

<!-- example(datepicker-formats) -->

##### MomentDateModule formats

To use custom formats with the `MomentDateModule` you can pick from the parse formats documented
[here](https://momentjs.com/docs/#/parsing/string-format/) and the display formats documented
[here](https://momentjs.com/docs/#/displaying/format/).

It is also possible to support multiple parse formats. For example:

```ts
@NgModule({
imports: [MatDatepickerModule, MomentDateModule],
providers: [
{
provide: MAT_DATE_FORMATS,
useValue: {
parse: {
dateInput: ['l', 'LL'],
},
display: {
dateInput: 'L',
monthYearLabel: 'MMM YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY',
},
},
},
],
})
export class MyApp {}
```

#### Customizing the calendar header

The header section of the calendar (the part containing the view switcher and previous and next
Expand Down