bug: MD_DATE_FORMATS is not exported - cannot customize date time formats

[davidgabrichidze]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Customizing the parse and display formats by example:

@NgModule({
  imports: [MdDatepickerModule],
  providers: [
    {provide: DateAdapter, useClass: NativeDateAdapter},
    {provide: MD_DATE_FORMATS, useValue: MY_NATIVE_DATE_FORMATS},
  ],
})
export class MyApp {}

What is the current behavior?

MD_DATE_FORMATS const is not exported by datetime/index.ts, so it is not available in @angular/material

[linuradu]

Could someone help me how can I customize date format with md-datepicker?

I'm using:

            <md-input-container class="whole-width">
            <input mdInput [mdDatepicker]="picker"  [(ngModel)]="contact.birthDate" 
                   placeholder="Birthdate">
                <button mdSuffix [mdDatepickerToggle]="picker"></button>
            </md-input-container>
            <md-datepicker #picker></md-datepicker>

And the date format that is sent to the backend is: 2017-06-14T21:00:00.000Z
I need to send like "MM/dd/yyyy"
Does someone have any idea?

[webplease]

same problem here! :(

[spd-e-gonzales]

Having the same problem in beta.6. At a loss for why I'm getting the following

ERROR in [at-loader] ./origin/app/monitor/xxxxxx.module.ts:94:20
TS2304: Cannot find name 'MD_DATE_FORMATS'.

even though i've imported in module.ts

import { MaterialModule, MdNativeDateModule, DateAdapter, MdDatepickerModule } from "@angular/material";

defined MY_DATE_FORMATS:

const MY_DATE_FORMATS = {
parse: {
dateInput: { month: 'short', year: 'numeric', day: 'numeric' }
},
// dateInput: { month: 'short', year: 'numeric', day: 'numeric' },
dateInput: 'input',
monthYearLabel: { year: 'numeric', month: 'short' },
dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric' },
monthYearA11yLabel: { year: 'numeric', month: 'long' },
};

@NgModule({
imports: [
MdDatepickerModule,
MaterialModule,
MdNativeDateModule
],
SNIPPED
providers: [
{ provide: DateAdapter, useClass: NativeDateAdapter },
{ provide: MD_DATE_FORMATS, useValue: MY_DATE_FORMATS }
]

[karolmie1]

@spd-e-gonzales I think that you need to import MD_DATE_FORMATS explicitely, so:
import { MaterialModule, MdNativeDateModule, DateAdapter, MdDatepickerModule, MD_DATE_FORMATS } from "@angular/material";

[Ronald-13]

Kinda stuck with similar issue. Can someone post a working solution?
import{ MdDatepickerModule,MdNativeDateModule,DateAdapter, MD_DATE_FORMATS } from '@angular/material';
import { MyDateAdapter,MY_DATE_FORMATS } from '../providers/MyDateAdapter';
providers: [
{ provide: DateAdapter, useClass: MyDateAdapter },
{ provide: MD_DATE_FORMATS, useValue: MY_DATE_FORMATS }
]

[ghost]

@Ronald-13 take a look to this https://stackoverflow.com/questions/44452966/angular-2-material-2-datepicker-date-format

[Bhawna14]

Hi @crisbeto , i am trying to import 'MY_NATIVE_DATE_FORMATS' from "@angular/material" and it throws error as "it has no exported member 'MY_NATIVE_DATE_FORMATS'.
using "@angular/material": "^2.0.0-beta.8",
Please suggest.

[MarcoGomesr]

@Bhawna14 'MY_NATIVE_DATE_FORMATS' is class that you create is not imported from "@angular/material" .... what you import from material is MD_DATE_FORMATS

import { MdNativeDateModule,
         DateAdapter,
         MD_DATE_FORMATS } from '@angular/material';

[sadhac]

@spd-e-gonzales I think that you need to import MD_DATE_FORMATS explicitely, so:
import { MaterialModule, MdNativeDateModule, DateAdapter, MdDatepickerModule, MD_DATE_FORMATS } from "@angular/material";

Its now MAT_DATE_FORMAT

[angular-automatic-lock-bot]

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.}