feat(MatDateRangePicker): add ability to use a custom component inside a dialog/popup

#### Feature Description

At the moment, the component that is used by the [`MatDatepickerBase._openAsDialog`](https://github.com/angular/components/blob/dfdf5cf7574a201b98b7e35ce770984527c790ee/src/material/datepicker/datepicker-base.ts#L500) and [`MatDatepickerBase._openAsPopup`](https://github.com/angular/components/blob/dfdf5cf7574a201b98b7e35ce770984527c790ee/src/material/datepicker/datepicker-base.ts#L542) methods is hardcoded. And you can't extend those because they are private.

If, instead, `MatDatepickerContent` was injected, we would have the ability to provide a component with extended functionality, e.g. with predefined date ranges. So, in the `MatDatepickerBase` we should have something like that:
```ts
constructor(
// ...
@Inject(MAT_DATEPICKER_CONTENT) private datepickerContent: MatDatepickerContentBase,
) {
// ...
}

// ...

private _openAsDialog(): void {
// ...
this._dialogRef = this._dialog.open>(this.datepickerContent, /* ... */);
// ...
}
```

We can then import `MatDatepickerContentBase`, extend it and provide our own component to be used in a dialog or popup.

#### Use Case

Add predefined ranges, use two calendars instead of one, add buttons etc.
For example, check the [ngx-daterangepicker-material](https://www.npmjs.com/package/ngx-daterangepicker-material) package:

Bắt đầu bằng cách đọc src/material/datepicker/datepicker-base.ts tại _openAsDialog và _openAsPopup, sau đó lần theo MatDatepickerContent và MatDatepickerContentBase. Xác định điểm mở rộng nội dung có thể được inject và xác minh rằng một component tùy chỉnh có thể thay thế nội dung dialog hoặc popup được hardcode mà vẫn giữ nguyên hành vi của datepicker.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.