@angular/material 19: Datepicker integrated with Timepicker should not reset the time

[Tungsten78]

Which @angular/* package(s) are the source of the bug?

@angular/material

Is this a regression?

Yes

Description

Can be reproduced in the v19 example: https://material.angular.io/components/timepicker/examples#timepicker-datepicker-integration

Steps:

1. use datepicker to select date
2. use timepicker to select time
3. change date - either via picker or type

Expected Result:
Time portion of the value should not change

Actual Result:
Time portion resets to 00:00

Please provide a link to a minimal reproduction of the bug

https://material.angular.io/components/timepicker/examples#timepicker-datepicker-integration

Please provide the exception or error you saw

Please provide the environment you discovered this bug in (run ng version)

"@angular/material": "19.0.3",

Anything else?

No response

[paulpietzko]

The problem is that the demo is using only one variable to showcase the Date and Time.

value: Date;

If you simply use two variables, one for the date and another one for the time, the values won't override each other.

date: Date;

time: Date;

And then you can bind to the different variables using standard two-way binding:

[(ngModel)]="date"

[(ngModel)]="time"

[Tungsten78]

Having separate variables defeats the purpose of the integrated example.

One would have to merge the two with extra logic.

[paulpietzko]

That’s correct, but the two pickers are separate anyway.

In my use case with DayJS, I implemented a new function that assigns the time values to the date values and returns a new date (ISO string) object:

updateFormattedValue() {
  const combinedValue = this.dateValue
    .utc()
    .hour(this.timeValue.hour())
    .minute(this.timeValue.minute())
    .second(this.timeValue.second());

  this.ui().setIfChanged(combinedValue.toISOString());
  return combinedValue.toISOString();
}