question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[datepicker] time is reset to midnight when field is blurred

See original GitHub issue

Bug

Create a mat-datepicker, with MatMomentDateModule adapter and with this provider

  providers: [{
    provide: MAT_DATE_FORMATS,
    useValue: {
      parse: {
        dateInput: 'L LTS',
      },
      display: {
        dateInput: 'L LTS',
        monthYearLabel: 'MMM YYYY',
        dateA11yLabel: 'L LTS',
        monthYearA11yLabel: 'MMMM YYYY',
      },
    }
  }]

Select a date

The input display 05/28/2018 12:00:00 AM

Edit the time

What is the expected behavior?

The date should change the time

What is the current behavior?

The time is reset to 12:00:00 AM when user blur the field

What are the steps to reproduce?

StackBlitz doesn’t work with moment, this is another issue (#9780). But for reference : https://stackblitz.com/edit/angular-material2-issue-25p4rg

What is the use-case or motivation for changing an existing behavior?

It use to work before a62cdb6

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Chrome Version 66.0.3359.181 moment 2.22.1

Angular CLI: 6.0.5
Node: 8.11.1
OS: darwin x64
Angular: 6.0.3
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.6.0
@angular-devkit/build-angular      0.6.0
@angular-devkit/build-optimizer    0.6.0
@angular-devkit/core               0.6.0
@angular-devkit/schematics         0.6.5
@angular/cdk                       6.1.0
@angular/cli                       6.0.5
@angular/material                  6.1.0
@angular/material-moment-adapter   6.1.0
@ngtools/webpack                   6.0.0
@schematics/angular                0.6.5
@schematics/update                 0.6.5
rxjs                               6.2.0
typescript                         2.7.2
webpack                            4.6.0

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
tchandellecommented, Jun 1, 2018

Thanks. I confirm that extending MomentDateAdapter with the method below solve the issue

compareDate(first: Moment, second: Moment): number {
   return first.valueOf() - second.valueOf();
 }
0reactions
angular-automatic-lock-bot[bot]commented, Sep 11, 2019

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

[datepicker] time is reset to midnight when field is blurred
Select a date. The input display 05/28/2018 12:00:00 AM. Edit the time. What is the expected behavior? The date should change the time...
Read more >
Timepicker always displays midnight on blur - Telerik
My issue is that if I set dateInput to true the time reverts back to midnight on blur. When I console.
Read more >
datepicker date off by one day - Stack Overflow
You can try this on your machine by changing time to different time zones where time gap b/w should be >=12 hours. Share....
Read more >
Solved: Re: Reset date picker to Today() after midnight
the new current day). The only way to set it correctly is by manually changing it or refreshing the app.
Read more >
How to reset a datepicker search? - UX Stack Exchange
For now, I have multiple ideas on how to do so: Create a clear button, but there is another input text field so...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found