components: Datepicker format not working in Stackblitz demo

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.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 2
Comments: 19 (9 by maintainers)

Most upvoted 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 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]
    };
  }
}

lukascode on Jun 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 👍

EricSimons on Mar 22, 2018