Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Tungsten78 opened this issue Dec 13, 2024 · 4 comments

Comments

@Tungsten78
Copy link

Tungsten78 commented Dec 13, 2024

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

@Tungsten78 Tungsten78 changed the title Datepicker integrated with Timepicker should not reset the time @angular/material: Datepicker integrated with Timepicker should not reset the time Dec 13, 2024
@Tungsten78 Tungsten78 changed the title @angular/material: Datepicker integrated with Timepicker should not reset the time @angular/material 19: Datepicker integrated with Timepicker should not reset the time Dec 13, 2024
@pkozlowski-opensource pkozlowski-opensource transferred this issue from angular/angular Dec 13, 2024
@paulpietzko
Copy link

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
Copy link
Author

Tungsten78 commented Dec 16, 2024

Having separate variables defeats the purpose of the integrated example.

One would have to merge the two with extra logic.

@paulpietzko
Copy link

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
Copy link

Narsun commented Dec 24, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants