2017-07-10 182 views

回答

2

你必須建立一個自定義的DateAdapter。 DateAdapter是一個實現DateAdapter接口的類。它必須有一堆預定義的函數實現,並且必須註冊爲DateAdapter提供者的useClass。

providers: [{provide: DateAdapter, useClass: CustomDateAdapter }] 

日期適配器告訴datepicker類似如何在內部存儲日期/時間,如何在輸入和其他東西中顯示它們。

材料提供了一個實現DateAdapter接口的類:NativeDateAdapter。它告訴MdDatepicker如何使用javascript本地Date對象。但javascript日期對象有一些限制(例如,不可能告訴它你想如何呈現日期)。長話短說:只是擴展了Material提供的NativeDateAdapter。你想要做的是在這個plunk(基本上你想重寫NativeDateAdapter的函數:getFirstDayOfWeek :() => number)中顯示,然後我會給出一些概述。

getFirstDayOfWeek(): number { 
    return 1; 
} 

在plunk中,你會看到一個custom-date-adapter.ts。這是我延長了NativeDateAdapter,覆蓋兩個功能:

1) parse: (value: any) => Date | null 
2) getFirstDayOfWeek:()=> number 

第一個功能意味着1)除其他事項外,創建什麼用戶選擇在日曆Date對象,和2)分析寫的是什麼在輸入一個日期對象。它解析一個日期以在內部存儲。

第二個函數(getFirstDayOfWeek)指示日曆在特定的星期幾(0 - 星期日,1 - 星期一,2 - 星期二...)開始。

另外還有一個有趣的format: (date: Date, displayFormat: Object) => string函數可用於實現/重寫,它允許您定義日期字符串在從日曆彈出窗口中選擇之後必須顯示在輸入中的格式。

在plunk中,在main.ts中,您必須告訴Angular有一個使用自定義日期適配器(查看providers數組)。在這種情況下,我建立了這個龐然大物與巴西葡萄牙語一起工作(查看main.ts構造函數,獲取date.setLocale('pt-BR'))。在這裏,我們以日/月/年爲單位,以星期一==「Segunda-Feira」的葡萄牙語呈現日期。 :D

還有一個MomentDateAdapter(基於Moment.js,而不僅僅是本地Date對象),在某些情況下,可以使您免於構建自定義日期適配器,因爲Moment.js已經處理了區域設置更有效的方式)。

希望它有幫助。

0

@jpavel需要更多幫助。

我試過了你的笨蛋,兩者都墜毀。控制檯日誌中的許多錯誤,輸出面板不顯示任何內容(僅「加載角度材料應用程序...」)。

我試圖採取你的代碼,並添加

providers: [{provide: DateAdapter, useClass: CustomDateAdapter }] 

我的核心模塊。似乎沒有任何事情發生。我輸入並粘貼到輸入(日期)字段,並且parse()或format()都不會被調用(我添加了控制檯。log())。

+0

我發現可以做什麼,但不明白爲什麼。 正如我所說的,我將該提供程序添加到由App Module導入的Core Module。我想它會像服務一樣提供給整個應用程序。 我懷疑它可能不是這種情況,我也將提供對象添加到我的懶加載特徵模塊中,然後調用自定義適配器。 但是爲什麼?不應該把它添加到核心模塊嗎? – Alex

+0

對不起。我已經解決了這個問題。 – jpavel

相關問題