angular2 Material 2 Datepicker - Output Date Formats

Question

I'm using https://material.angular.io/components/component/datepicker in my angular4 project. How can I format selected date in input box with short format like "May 29, 2017". Currently it is displayed as 29/05/2017

Sample code:

<md-input-container>
  <input mdInput readonly="true" [mdDatepicker]="startDatePicker" [mdDatepickerFilter]="myFilter" [min]="minDate" [max]="maxDate" class="date-text ng-dirty ng-valid-parse ng-touched ng-not-empty ng-valid ng-valid-required" placeholder="Choose a date">
  <button mdSuffix [mdDatepickerToggle]="startDatePicker" class="date-icon"></button>
</md-input-container>

<md-datepicker #startDatePicker [dateFormat]="'LL'" startView="month" [startAt]="currentDate"></md-datepicker>

TS:

@ViewChild('startDatePicker') startDatePicker: MdDatepicker<Date>;

PS. [dateFormat]="'LL'" is not working

Please post the code you have. There is a section at the link you posted for date formatting. — Simon Visser
– Simon Visser, Commented May 29, 2017 at 8:43

hiper2d · Accepted Answer · 2017-06-09 10:02:08Z

4

You cannot set date format at the moment easily. There is no such property in Material 2 Datepicker API and the only proper way to change the format is to provide your own DateAdapter implementation. The official documentation doesn't provide any instructions about that. There is only one basic implementetion right now which defines formats according to the locale. There are many complains about that and more adapters should come soon. You can try to use one based on moment.js from this issue-thread or just wait.

You can also play with locales to get different formats in your Datepicker. But it's just a workaround till a proper official solution comes:

export class AppModule {
  constructor(private dateAdapter:DateAdapter<Date>) {
    dateAdapter.setLocale('de'); // DD.MM.YYYY
  }
}

answered Jun 9, 2017 at 10:02

hiper2d

2,9141 gold badge20 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

d123546 Over a year ago

Thank you for your answer. Ill try to play around this Adapter

Einsamer Over a year ago

Excuse me, where could we get the location id like "de"?

hiper2d Over a year ago

@Einsamer, do you mean a list of available locales?

Einsamer Over a year ago

Yes, it is. I think they should use switch-case somewhere

BrunoLM Over a year ago

That works, but I tried to add it on the app module and it didn't work (I'm using a date picker in a sub-module)... That's annoying...

merlosy · Accepted Answer · 2017-09-11 13:04:01Z

0

I'd rather use module providers for that:

@NgModule({
...
providers: [
     { provide: LOCALE_ID, useValue: navigator.language }
     ...
  ]
})
export class AppModule { }

or you can replace navigator.language by 'de' to achieve the same as above.

answered Sep 11, 2017 at 13:04

merlosy

6016 silver badges12 bronze badges

Collectives™ on Stack Overflow

angular2 Material 2 Datepicker - Output Date Formats

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related