Datepicker format not working in Stackblitz demo
See original GitHub issueBug, feature request, or proposal:
Formatting configuration for datepicker seems to be completely ignored. Uses only american M/D/Y
format. Reading the documentation (note : anchor # does not work), it seems like it uses only native date and not moment.js.
What is the expected behavior?
Being able to change (at least) display format from MY_FORMATS variable.
What is the current behavior?
It does not appear to work in official demo.
What are the steps to reproduce?
Official demo : https://stackblitz.com/angular/gopooxxyykl
Import MatMomentDateModule in main.ts
:
import { MatMomentDateModule } from '@angular/material-moment-adapter'
@NgModule({
imports: [ ... MatMomentDateModule, ...]
Change MY_FORMATS.display.dateInput
variable in app/datepicker-formats-example.ts
:
dateInput: 'Y-MM-DD HH:mm:ss'
Reload the inner browser on the right.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Demo says 5.2.3, 5.0.0-rc.3, LinuxMint 18.1 with Chromium 64.0.3282.119. tsc 1.7.5 & webpack 3.6.0 on my computer.
Issue Analytics
- State:
- Created 6 years ago
- Reactions:2
- Comments:19 (9 by maintainers)
Top Results From Across the Web
Date Picker Format Change - StackBlitz
Starter project for Angular apps that exports to the Angular CLI.
Read more >Fix Date And - StackBlitz
selector: 'nz-demo-date-picker-format',. template: `. <nz-date-picker [nzFormat]="dateFormat"></. nz-date-picker>. <br />.
Read more >change format in mat-date-picker - StackBlitz
Datepicker with custom formats using custom date adapter. ... import {DemoMaterialModule} from './app/. material-module';.
Read more >binarykits/ngx-mat-datepicker-simple-formatting Demo
A project based on rxjs, tslib, core-js, zone.js, @angular/cdk, @angular/core, @angular/forms, @angular/common, @angular/router, @angular/compiler, ...
Read more >Mat Datepicker Work - StackBlitz
Starter project for Angular apps that exports to the Angular CLI.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
In my case formatting configuration for datepicker was ignored in my feature lazy modules. After I moved configuration ({provide: MAT_DATE_FORMATS, … } etc) from
app.module.ts
to myshared.module.ts
which is imported almost everywhere, now it works as expected.shared.module.ts
Creator of stackblitz here- I think this might have to do with with the module resolution strategy stackblitz employs vs local CLI. Specifically, for performance reasons stackblitz will consume UMD bundles whenever possible instead of the raw untranspiled individual files specified by the
module
field/etc. This can cause some differences in runtime behavior between SB and local. I haven’t had enough time to dig into the specific culprit in this instance, but my prelim research is kinda pointing in that direction.Will circle back once I’ve tracked this bug down 👍