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 format not working in Stackblitz demo

See original GitHub issue

Bug, 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:closed
  • Created 6 years ago
  • Reactions:2
  • Comments:19 (9 by maintainers)

github_iconTop GitHub Comments

5reactions
lukascodecommented, Jun 22, 2018

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 my shared.module.ts which is imported almost everywhere, now it works as expected.

shared.module.ts

export const CUSTOM_DATE_FORMATS = {
  parse: {
    dateInput: 'LL'
  },
  display: {
    dateInput: 'LL, dddd',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY'
  },
};

export const providers = [

];

@NgModule({
  imports: [
    CommonModule,
    MaterialModule,
    MatMomentDateModule
  ],
  exports: [
    MaterialModule,
    MatMomentDateModule
  ],
  providers: [
    { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
    { provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS },
    { provide: MAT_DATE_LOCALE, useValue: 'pl'}
  ]
})
export class SharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [...providers]
    };
  }
}
1reaction
EricSimonscommented, Mar 22, 2018

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 👍

Read more comments on GitHub >

github_iconTop 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 >

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