Angular2 Material 2 Datepicker - Date Output Formats

Question

I am using https://material.angular.io/components/component/datepicker in my angular4 project. How can I format the selected date in the input field with a short format, for example, "May 29, 2017." It currently appears as 05/29/2017

Code example:

<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" does not work

Answer 1

You cannot set the date format at the moment easily. There is no such property in the Material 2 Datepicker API , and the only right way to change the format is to provide you with your own DateAdapter . The official documentation does not give any instructions. Currently, there is only one basic implementation that defines formats according to locale . There are many complaints about this, and soon adapters should appear soon. You can try to use it based on the .js moment from this issue-thread or just wait.

You can also play with locales to get various formats in your Datepicker. But this is just a workaround until the correct official solution appears:

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

Answer 2

I would prefer to use module providers for this:

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

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