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

[theorlovsky]

Feature Description

At the moment, the component that is used by the MatDatepickerBase._openAsDialog and MatDatepickerBase._openAsPopup 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:

constructor(
  // ...
  @Inject(MAT_DATEPICKER_CONTENT) private datepickerContent: MatDatepickerContentBase,
) {
  // ...
}

// ...

private _openAsDialog(): void {
  // ...
  this._dialogRef = this._dialog.open<MatDatepickerContentBase<S, D>>(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 package:

[mmalerba]

This is something that we want to add support for, we don't have a timeline yet though

[niklissad]

any updates for the issue and PR?

[Splaktar]

any updates for the issue and PR?

We want to do some refactoring of the datepicker component before we finalize the APIs and design for this feature. It's still something we plan to support, but likely not this quarter.

[theorlovsky]

@Splaktar In that case, why don't you review and merge the PR that is already there? And after that you can do your refactoring whenever you want without making us wait for an unknown amount of time.

[Splaktar]

@theorlovsky because without the refactoring happening first, we don't think that we can get an API and implementation that we're willing to support. With our breaking change policy, it would take us 12-18 months to get that refactoring released if it included a breaking change to an API added now.

[angular-robot[bot]]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot[bot]]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

[jgutierrez-ayt]

Hi guys. What's the actual status of the requested feature?

[ctilley83]

It would be useful to display more than one calendar per input field for a couple use cases.

1. For cases where the desired date is commonly in the previous month or the current month (in reports for ex).
2. It would make selecting date ranges more intuitive when your date range crosses into the next month.