<commit_before>The datepicker allows users to enter a date either through text input, or by choosing a date from
the calendar. It is made up of several components, directives and [the date implementation module](#choosing-a-date-implementation-and-date-format-settings) that work together.

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

### Connecting a datepicker to an input

A datepicker is composed of a text input and a calendar pop-up, connected via the `matDatepicker`
property on the text input.

There is also an optional datepicker toggle button that gives the user an easy way to open the datepicker pop-up.

<!-- example({"example":"datepicker-overview",
              "file":"datepicker-overview-example.html",
              "region":"toggle"}) -->

This works exactly the same with an input that is part of an `<mat-form-field>` and the toggle
can easily be used as a prefix or suffix on the Material input:

<!-- example({"example":"datepicker-overview",
              "file":"datepicker-overview-example.html"}) -->

If you want to customize the icon that is rendered inside the `mat-datepicker-toggle`, you can do so
by using the `matDatepickerToggleIcon` directive:

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

### Date range selection

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

The `mat-date-range-input` component requires two `input` elements for the start and end dates,
respectively:

```html
<mat-date-range-input>
  <input matStartDate placeholder="Start date">
  <input matEndDate placeholder="End date">
</mat-date-range-input>
```

The `mat-date-range-picker` component acts the the pop-up panel for selecting dates. This works in
the same way as `mat-datepicker`, but allows the user to select multiple times:

```html
<mat-date-range-picker #picker></mat-date-range-picker>
```

Connect the range picker and range input using the `rangePicker` property:
<commit_msg>Fix extraneous & missing words in datepicker docs (#20244)<commit_after>The datepicker allows users to enter a date either through text input, or by choosing a date from
the calendar. It is made up of several components, directives and [the date implementation module](#choosing-a-date-implementation-and-date-format-settings) that work together.

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

### Connecting a datepicker to an input

A datepicker is composed of a text input and a calendar pop-up, connected via the `matDatepicker`
property on the text input.

There is also an optional datepicker toggle button that gives the user an easy way to open the datepicker pop-up.

<!-- example({"example":"datepicker-overview",
              "file":"datepicker-overview-example.html",
              "region":"toggle"}) -->

This works exactly the same with an input that is part of an `<mat-form-field>` and the toggle
can easily be used as a prefix or suffix on the Material input:

<!-- example({"example":"datepicker-overview",
              "file":"datepicker-overview-example.html"}) -->

If you want to customize the icon that is rendered inside the `mat-datepicker-toggle`, you can do so
by using the `matDatepickerToggleIcon` directive:

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

### Date range selection

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

The `mat-date-range-input` component requires two `input` elements for the start and end dates,
respectively:

```html
<mat-date-range-input>
  <input matStartDate placeholder="Start date">
  <input matEndDate placeholder="End date">
</mat-date-range-input>
```

The `mat-date-range-picker` component acts as the pop-up panel for selecting dates. This works in
the same way as `mat-datepicker`, but allows the user to select multiple times:

```html
<mat-date-range-picker #picker></mat-date-range-picker>
```

Connect the range picker and range input using the `rangePicker` property:

{'fraction_non_alphanumeric': 0.10180351210251543, 'fraction_numerical': 0.0011865211200759373, 'mean_word_length': 4.242537313432836, 'pattern_counts': {'":': 10, '<': 25, '<?xml version=': 0, '>': 25, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7573427', 'n_tokens_mistral': 1158, 'n_tokens_neox': 1096, 'n_words': 502}