help(MatDatePicker): Implementing range date picker with custom header: problems and suggestions

[ahimik]

What are you trying to do?

I am trying to build a date picker with the custom header which includes date presets like 'last month, this month, last 7 days, etc..' and date range selection feature.
I am close to be done there but I had to use several workarounds to bypass the following issues:

1. I cound't find a way to determine when date range selection is completed via calendar selection. This is important for me to know this since I have two sources of date range changes:

• custom header when user clicks on date range preset(dates need to be set according to selected preset which causes unwanted (dateChange) event to be fired on date input)
• regular date range selection using calendar(preset needs to be cleared)

When I use (dateChange) event on matEndDate input like this:

    <mat-date-range-input [rangePicker]="picker">
          <input [(ngModel)]="startDate" matStartDate matInput>
          <input [(ngModel)]="endDate" (dateChange)="handle($event)" matEndDate matInput>
    </mat-date-range-input>

I noticed the following issues:

• my IDE(IntelliJ 2020.1) complains about (dateChange) event: Event dateChange is not emitted by any applicable directives nor by input element
• dateChange event gets fired twice during date range selection via calendar: first time with null value and second time with the selected value.

since dateChange gets fired whenever date input changes no matter where this change comes from I wonder if it is possible to have something like this:

       <mat-date-range-picker #picker (dateRangeSelected)="handleDateRangeSelected($event)">
       </mat-date-range-picker>

, where (dateRangeSelected) gets fired when user completes range selection using calendar only?

Currenly I subscribe to calendar.selectedChange event and bypass this event through my custom header to workaround this issue.

2. I do believe that class MatDateRangePicker must support DateRange selection, but currently it allows only single selection which comes from it's parent class:

/** Selects the given date */
select(date: D): void;

• Angular: 9.1.9
• CDK/Material: 10.0.0-rc.1
• Browser(s): Chrome v83.0.4103.97
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 64bit

[crisbeto]

1. You should be able to inject the MatDateSelectionModel inside your header which will tell you whether the selection is complete.
2. I'm not sure what the history behind the select method is, but I think it's doing what it's supposed to, because it's adding the start date first and then the end. If you want to override the entire range the same time, you can do it through the MatDateSelectionModel that is mentioned above.

[ahimik]

Thanks for the hint regardless 1. point. I was trying to do something like this at the beginning but I was trying to inject MatDateRangeSelectionModel instead so I was getting NullInjection error.
But still this is only available from the custom header, right?

Regardless 2nd point I was trying to say that I can't select date range as follows:

Thanks for the answers!

[crisbeto]

@ahimik did you manage to resolve the issue? As I mentioned above, you can't select the entire range at once with select since it's meant to be the equivalent of the user clicking on a date so you'd have to call it twice, but injecting the MatDateRangeSelectionModel is supposed to work. If you post what your code looks like, I can look into why you were getting the injection error.

[wagnermaciel]

Closing because this issue has been inactive for 2 weeks or more after follow up was requested.

[angular-automatic-lock-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.}