@@ -37,14 +37,14 @@ by using the `matDatepickerToggleIcon` directive:
37
37
38
38
<!-- example(datepicker-custom-icon) -->
39
39
40
- ### Selecting a range of dates
40
+ ### Date range selection
41
41
42
42
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
44
44
` mat-datepicker ` and the basic datepicker input.
45
45
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:
48
48
49
49
``` html
50
50
<mat-date-range-input >
@@ -53,14 +53,14 @@ user can type the start and end dates:
53
53
</mat-date-range-input >
54
54
```
55
55
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:
58
58
59
59
``` html
60
60
<mat-date-range-picker #picker ></mat-date-range-picker >
61
61
```
62
62
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 :
64
64
65
65
``` html
66
66
<mat-date-range-input [rangePicker] =" picker" >
@@ -221,11 +221,10 @@ to limitations in the Material Design theming system. They can be customized usi
221
221
222
222
### Customizing the date selection logic
223
223
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
229
228
ranges.
230
229
231
230
<!-- example(date-range-picker-selection-strategy) -->
0 commit comments