angular2 Tài liệu 2 Datepicker - Định dạng ngày đầu ra

Question

Tôi đang sử dụng https://material.angular.io/components/component/datepicker trong dự án angular4 của mình. Làm thế nào tôi có thể định dạng ngày đã chọn trong hộp nhập liệu với định dạng ngắn như "ngày 29 tháng 5 năm 2017". Hiện nay nó được hiển thị dưới dạng mã 29/05/2017

mẫu:

<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'" không hoạt động

Answer 1

Bạn không thể đặt định dạng ngày tại thời điểm này một cách dễ dàng. Không có tài sản như vậy trong Material 2 Datepicker API và cách thích hợp duy nhất để thay đổi định dạng là cung cấp triển khai DateAdapter của riêng bạn. Tài liệu chính thức không cung cấp bất kỳ hướng dẫn nào về điều đó. Chỉ có một số implementetion cơ bản ngay bây giờ xác định định dạng theo địa chỉ locale. Có rất nhiều phàn nàn về điều đó và nhiều bộ điều hợp sẽ sớm ra mắt. Bạn có thể thử sử dụng một dựa trên moment.js từ this luồng sự cố hoặc chỉ cần đợi.

Bạn cũng có thể chơi với các ngôn ngữ để nhận các định dạng khác nhau trong Datepicker của mình. Nhưng nó chỉ là một cách giải quyết cho đến một giải pháp chính thức đúng đắn nói:

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

Answer 2

Tôi muốn sử dụng các nhà cung cấp mô-đun cho rằng:

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

hoặc bạn có thể thay thế navigator.language bởi 'de' để đạt được mức tương tự như trên.