Components: [mat-datepicker] proposal: pull request to add option to display a today button in header

[mnahkies]

Bug, feature request, or proposal:

Proposal / Feature

What is the expected behavior?

An option exists to enable a button on the date picker header to jump from the current selection to today.

What is the current behavior?

Not supported

What are the steps to reproduce?

N/A

What is the use-case or motivation for changing an existing behavior?

For some use cases of date picker it is handy to be able to quickly jump from the current selection to today.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

N/A

Is there anything else we should know?

I've made this change in my local clone of material2 and am using it in my project.

It's ready to make a pull request, aside from being based on the current release tag rather than tip of master (I'm unable to get master to build currently) - however the changes apply cleanly to tip of master so easy to transplant.

Given that you support custom header components I'm not sure if you would be willing to accept this, and so thought I'd raise this issue to get some guidance.

I could publish this as an independent module, but as far as I can tell I would need to duplicate the entire "mat-calendar-header" component to do this (which would require ongoing maintenance to keep in sync), and would probably be unable to extend the MatDatepickerIntl to include the string for it.

Please see the attached screenshot for what my change currently looks like. Example usage:

<mat-datepicker showTodayButton="true" #startDatePicker></mat-datepicker>

[crisbeto]

Couldn't you achieve the same with the option to provide a custom header to the datepicker?

[mnahkies]

@crisbeto yes as I said at the bottom of my issue I could create a separate component and supply this as a custom header.

I'm reluctant to do so because I would effectively be duplicating the entire mat-calendar-header component to add a single button. This would present two issues:

• Ongoing maintenance to pull changes from angular/material2 into forked header component
• Unable to use the MatDatepickerIntl mechanism for localization

That said I understand that this use case may not be considered common enough for inclusion in the main library.

Do you have any suggestions for how I could go the custom header route, but avoid forking (read copy paste to a separate module then adding my changes) the main mat-calendar-header component?

I'm pretty new to angular development and so there's a good chance I'm just ignorant of a clean way to approach this.

[crisbeto]

You can extend the existing header so it inherits all the logic and then add your custom template on top of it. In general we try to avoid having multiple ways of doing the same thing, but @mmalerba might be able to weigh in better in this case.

[mmalerba]

Yeah I think this is outside the scope of what we want to support. I would be ok with a PR to add <ng-content> between the month selector and arrow buttons. Then you could create a wrapper component with a template like:

<mat-calendar-header>
  <button>TODAY</button>
</mat-calendar-header>

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}