bug(MatDatePicker): Range end date fails to be set correctly when chaning end date value directly from component

[ahimik]

Reproduction

https://stackblitz.com/edit/angular-9-material-starter-shtplo

Steps to reproduce:

1. Set up material date picker with range selection feature according to the regular example taken from docs: https://next.material.angular.io/components/datepicker/overview
2. Bind matStartDate and matEndDate inputs to startDate and endDate component's variables using [(ngModel)]="startDate" and [(ngModel)]="endDate" accordingly.
3. Change startDate and endDate variables from component to any new values(within one method call).

Steps to reproduce usign provided stackblitz emaple:

1. Click on a 'change date(bug)' button.
2. Observe end date has been set correctly to the last day of the current month while endDate component variable's value has been reverted back to the previous(current day) value.

Expected Behavior

What behavior were you expecting to see?

startDate component variable should be set to new value.
endDate component variable should be set to new value.

Actual Behavior

startDate component variable is set correctly.
endDate component variable is reverted back to previously selected value. However matEndDate range input itself shows the correct date value.

Temporal workaround

The workaround is to set timeout for setting end range value:

  changeDateBugWorkAround() {
      const date = new Date();
      this.startDate = new Date(date.getFullYear(), date.getMonth(), 1);
      setTimeout(() => {
        this.endDate = new Date(date.getFullYear(), date.getMonth() + 1, 0);
      }, 1);      
  }

Environment

• 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]

Thank you for the report, this is definitely a bug that we should resolve. One small note on your demo: you shouldn't put matInput on matStartDate and matEndDate, because it's not required and it ends up shifting your start input slightly up.

[ahimik]

Thanks for the quick reply!

One small note on your demo: you shouldn't put matInput on matStartDate and matEndDate, because it's not required and it ends up shifting your start input slightly up.

I've taken the example from the documentation:

, so I hope docs should be updated as well https://next.material.angular.io/components/datepicker/overview

Thanks a lot!

[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.}