@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();
}

[Narsun]

I have the same problem too, but when i changing time.

1. set date as next day or any else different than today (30.12.24 for example)
2. set time (8:00 for example)
   date will changed to current.
   I think it must work currectly with formControl, because it common use case, when we need to set date and time.

[Tungsten78]

I have the same problem too, but when i changing time.

1. set date as next day or any else different than today (30.12.24 for example)
2. set time (8:00 for example)
   date will changed to current.
   I think it must work currectly with formControl, because it common use case, when we need to set date and time.

@Narsun - what you are experiencing is slightly different, see angular/angular#58522

[Narsun]

I have the same problem too, but when i changing time.

1. set date as next day or any else different than today (30.12.24 for example)
2. set time (8:00 for example)
   date will changed to current.
   I think it must work currectly with formControl, because it common use case, when we need to set date and time.

@Narsun - what you are experiencing is slightly different, see angular/angular#58522

It's related problems, i think. and both topics refering to each other

[Blafasel3]

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();
}

But then there is no integration whatsoever and the example is actually misleading in a big portion of angular applications.