Skip to content

Commit e00cdeb

Browse files
mmalerbammalerba
committed
update docs
1 parent 4a3f81c commit e00cdeb

File tree

1 file changed

+55
-39
lines changed

1 file changed

+55
-39
lines changed

‎src/lib/datepicker/datepicker.md‎

Lines changed: 55 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -34,15 +34,15 @@ can easily be used as a prefix or suffix on the material input:
3434

3535
### Setting the calendar starting view
3636

37-
By default the calendar will open in month view, this can be changed by setting the `startView`
38-
property of `<mat-datepicker>` to `year`. In year view the user will see all months of the year and
39-
then proceed to month view after choosing a month.
37+
The `startView` property of `<mat-datepicker>` can be used to set the view that will show up when
38+
the calendar first opens. It can be set to `month`, `year`, or `multi-year`; by default it will open
39+
to month view.
4040

41-
The month or year that the calendar opens to is determined by first checking if any date is
42-
currently selected, if so it will open to the month or year containing that date. Otherwise it will
43-
open to the month or year containing today's date. This behavior can be overridden by using the
44-
`startAt` property of `<mat-datepicker>`. In this case the calendar will open to the month or year
45-
containing the `startAt` date.
41+
The month, year, or range of years that the calendar opens to is determined by first checking if any
42+
date is currently selected, if so it will open to the month or year containing that date. Otherwise
43+
it will open to the month or year containing today's date. This behavior can be overridden by using
44+
the `startAt` property of `<mat-datepicker>`. In this case the calendar will open to the month or
45+
year containing the `startAt` date.
4646

4747
<!-- example(datepicker-start-view) -->
4848

@@ -275,46 +275,62 @@ should have a placeholder or be given a meaningful label via `aria-label`, `aria
275275

276276
#### Keyboard shortcuts
277277

278-
The keyboard shortcuts to handle datepicker are:
278+
The datepicker supports the following keyboard shortcuts:
279279

280-
| Shortcut | Action |
281-
|----------------------|-------------------------------------|
282-
| `ALT` + `DOWN_ARROW` | Open the calendar pop-up |
283-
| `ESCAPE` | Close the calendar pop-up |
280+
| Shortcut | Action |
281+
|----------------------|-------------------------------------------|
282+
| `ALT` + `DOWN_ARROW` | Open the calendar pop-up |
283+
| `ESCAPE` | Close the calendar pop-up |
284284

285285

286286
In month view:
287287

288-
| Shortcut | Action |
289-
|----------------------|-------------------------------------|
290-
| `LEFT_ARROW` | Go to previous day |
291-
| `RIGHT_ARROW` | Go to next day |
292-
| `UP_ARROW` | Go to same day in the previous week |
293-
| `DOWN_ARROW` | Go to same day in the next week |
294-
| `HOME` | Go to the first day of the month |
295-
| `END` | Go to the last day of the month |
296-
| `PAGE_UP` | Go to previous month |
297-
| `ALT` + `PAGE_UP` | Go to previous year |
298-
| `PAGE_DOWN` | Go to next month |
299-
| `ALT` + `PAGE_DOWN` | Go to next year |
300-
| `ENTER` | Select current date |
288+
| Shortcut | Action |
289+
|----------------------|-------------------------------------------|
290+
| `LEFT_ARROW` | Go to previous day |
291+
| `RIGHT_ARROW` | Go to next day |
292+
| `UP_ARROW` | Go to same day in the previous week |
293+
| `DOWN_ARROW` | Go to same day in the next week |
294+
| `HOME` | Go to the first day of the month |
295+
| `END` | Go to the last day of the month |
296+
| `PAGE_UP` | Go to the same day in the previous month |
297+
| `ALT` + `PAGE_UP` | Go to the same day in the previous year |
298+
| `PAGE_DOWN` | Go to the same day in the next month |
299+
| `ALT` + `PAGE_DOWN` | Go to the same day in the next year |
300+
| `ENTER` | Select current date |
301301

302302

303303
In year view:
304304

305-
| Shortcut | Action |
306-
|----------------------|-------------------------------------|
307-
| `LEFT_ARROW` | Go to previous month |
308-
| `RIGHT_ARROW` | Go to next month |
309-
| `UP_ARROW` | Go to previous 6 months |
310-
| `DOWN_ARROW` | Go to next 6 months |
311-
| `HOME` | Go to the first month of the year |
312-
| `END` | Go to the last month of the year |
313-
| `PAGE_UP` | Go to previous year |
314-
| `ALT` + `PAGE_UP` | Go to previous 10 years |
315-
| `PAGE_DOWN` | Go to next year |
316-
| `ALT` + `PAGE_DOWN` | Go to next 10 years |
317-
| `ENTER` | Select current month |
305+
| Shortcut | Action |
306+
|----------------------|-------------------------------------------|
307+
| `LEFT_ARROW` | Go to previous month |
308+
| `RIGHT_ARROW` | Go to next month |
309+
| `UP_ARROW` | Go up a row (back 4 months) |
310+
| `DOWN_ARROW` | Go down a row (forward 4 months) |
311+
| `HOME` | Go to the first month of the year |
312+
| `END` | Go to the last month of the year |
313+
| `PAGE_UP` | Go to the same month in the previous year |
314+
| `ALT` + `PAGE_UP` | Go to the same month 10 years back |
315+
| `PAGE_DOWN` | Go to the same month in the next year |
316+
| `ALT` + `PAGE_DOWN` | Go to the same month 10 years forward |
317+
| `ENTER` | Select current month |
318+
319+
In multi-year view:
320+
321+
| Shortcut | Action |
322+
|----------------------|-------------------------------------------|
323+
| `LEFT_ARROW` | Go to previous year |
324+
| `RIGHT_ARROW` | Go to next year |
325+
| `UP_ARROW` | Go up a row (back 4 years) |
326+
| `DOWN_ARROW` | Go down a row (forward 4 years) |
327+
| `HOME` | Go to the first year in the current range |
328+
| `END` | Go to the last year in the current range |
329+
| `PAGE_UP` | Go back 24 years |
330+
| `ALT` + `PAGE_UP` | Go back 240 years |
331+
| `PAGE_DOWN` | Go forward 24 years |
332+
| `ALT` + `PAGE_DOWN` | Go forward 240 years |
333+
| `ENTER` | Select current year |
318334

319335
### Troubleshooting
320336

0 commit comments

Comments
 (0)