Skip to content

docs(datepicker): convert date module tables to be mobile-friendly #18210

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.

Sign up for GitHub

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 1 commit into from
Jan 28, 2020
Merged

docs(datepicker): convert date module tables to be mobile-friendly #18210

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
70 changes: 56 additions & 14 deletions src/material/datepicker/datepicker.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,20 +210,62 @@ It's also possible to set the locale at runtime using the `setLocale` method of
The datepicker was built to be date implementation agnostic. This means that it can be made to work
with a variety of different date implementations. However it also means that developers need to make
sure to provide the appropriate pieces for the datepicker to work with their chosen implementation.
The easiest way to ensure this is just to import one of the pre-made modules:

|Module |Date type|Supported locales |Dependencies |Import from |
|---------------------|---------|-----------------------------------------------------------------------|----------------------------------|----------------------------------|
|`MatNativeDateModule`|`Date` |en-US |None |`@angular/material` |
|`MatMomentDateModule`|`Moment` |[See project](https://github.com/moment/moment/tree/develop/src/locale)|[Moment.js](https://momentjs.com/)|`@angular/material-moment-adapter`|

*Please note: `MatNativeDateModule` is based off of the functionality available in JavaScript's
native `Date` object, and is thus not suitable for many locales. One of the biggest shortcomings of
the native `Date` object is the inability to set the parse format. We highly recommend using the
`MomentDateAdapter` or a custom `DateAdapter` that works with the formatting/parsing library of your
choice.*

These modules include providers for `DateAdapter` and `MAT_DATE_FORMATS`
The easiest way to ensure this is to import one of the provided date modules:

`MatNativeDateModule`

<table>
<tbody>
<tr>
<th align="left" scope="row">Date type</th>
<td><code>Date</code></td>
</tr>
<tr>
<th align="left" scope="row">Supported locales</th>
<td>en-US</td>
</tr>
<tr>
<th align="left" scope="row">Dependencies</th>
<td>None</td>
</tr>
<tr>
<th align="left" scope="row">Import from</th>
<td><code>@angular/material/core</code></td>
</tr>
</tbody>
</table>

`MatMomentDateModule`

<table>
<tbody>
<tr>
<th align="left" scope="row">Date type</th>
<td><code>Moment</code></td>
</tr>
<tr>
<th align="left" scope="row">Supported locales</th>
<td><a href="https://github.com/moment/moment/tree/develop/src/locale) for details">See project</a></td>
</tr>
<tr>
<th align="left" scope="row">Dependencies</th>
<td><a href="https://momentjs.com/">Moment.js</a></td>
</tr>
<tr>
<th align="left" scope="row">Import from</th>
<td><code>@angular/material-moment-adapter</code></td>
</tr>
</tbody>
</table>

*Please note: `MatNativeDateModule` is based off the functionality available in JavaScript's
native [`Date` object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Date).
Thus it is not suitable for many locales. One of the biggest shortcomings of the native `Date`
object is the inability to set the parse format. We highly recommend using the `MomentDateAdapter`
or a custom `DateAdapter` that works with the formatting/parsing library of your choice.*

These modules include providers for `DateAdapter` and `MAT_DATE_FORMATS`.

```ts
@NgModule({
Expand Down Expand Up @@ -292,7 +334,7 @@ export class MyApp {}

#### Customizing the parse and display formats

The `MAT_DATE_FORMATS` object is just a collection of formats that the datepicker uses when parsing
The `MAT_DATE_FORMATS` object is a collection of formats that the datepicker uses when parsing
and displaying dates. These formats are passed through to the `DateAdapter` so you will want to make
sure that the format objects you're using are compatible with the `DateAdapter` used in your app.

Expand Down