Skip to content

Commit 0f66a90

Browse files
committed
proposed edits
1 parent bf8f2eb commit 0f66a90

File tree

1 file changed

+11
-12
lines changed

1 file changed

+11
-12
lines changed

src/material/datepicker/datepicker.md

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -37,14 +37,14 @@ by using the `matDatepickerToggleIcon` directive:
3737

3838
<!-- example(datepicker-custom-icon) -->
3939

40-
### Selecting a range of dates
40+
### Date range selection
4141

4242
If you want your users to select a range of dates, instead of a single date, you can use the
43-
`mat-date-range-picker` and `mat-date-range-input` components. They work in a similar way to the
43+
`mat-date-range-input` and `mat-date-range-picker` components. They work in similarly to the
4444
`mat-datepicker` and the basic datepicker input.
4545

46-
First of all, you have to add a `mat-date-range-input` with two `input` elements into which the
47-
user can type the start and end dates:
46+
The `mat-date-range-input` component requires two `input` elements for the start and end dates,
47+
respectively:
4848

4949
```html
5050
<mat-date-range-input>
@@ -53,14 +53,14 @@ user can type the start and end dates:
5353
</mat-date-range-input>
5454
```
5555

56-
Afterwards you have to add a `mat-date-range-picker` element which works in the same way as
57-
`mat-datepicker`, but allows the user to select multiple times:
56+
The `mat-date-range-picker` component acts the the pop-up panel for selecting dates. This works in
57+
the same way as `mat-datepicker`, but allows the user to select multiple times:
5858

5959
```html
6060
<mat-date-range-picker #picker></mat-date-range-picker>
6161
```
6262

63-
Finally, you have to connect the range picker and range input using the `rangePicker` binding:
63+
Connect the range picker and range input using the `rangePicker` property:
6464

6565
```html
6666
<mat-date-range-input [rangePicker]="picker">
@@ -221,11 +221,10 @@ to limitations in the Material Design theming system. They can be customized usi
221221

222222
### Customizing the date selection logic
223223

224-
If you want to control how the date range picker behaves when the user is previewing a date and
225-
how the range is changed when they've selected a date, you can do so by providing a new range
226-
selection strategy using the `MAT_CALENDAR_RANGE_SELECTION_STRATEGY` injection token. The provided
227-
value has to implement the `MatCalendarRangeSelectionStrategy` interface. In the following example,
228-
we use the range selection strategy to create a custom range picker that limits the user to five-day
224+
The date-range-picker supports custom behaviors for range previews and selection. To customize
225+
this, you first create a class that implements `MatCalendarRangeSelectionStrategy`, and then provide
226+
this class via the `MAT_CALENDAR_RANGE_SELECTION_STRATEGY` injection token. The following example
227+
uses the range selection strategy to create a custom range picker that limits the user to five-day
229228
ranges.
230229

231230
<!-- example(date-range-picker-selection-strategy) -->

0 commit comments

Comments
 (0)