Angular Material Datepicker自定義日期格式

Angular Material

前言

在企業級開發中，我們經常會使用到日期控件。在以前的jquery框架項目中，我們通常會選擇mydate 97。現在我們使用Angular框架，Material官網也為我們提供了Datepicker組件。對於日期的顯示的格式，有很多種，比如下面的：

• 2019/07/11
• 2019-07-11
• 等...

面對這種需求，就需要我們可以自定義Datepicker的顯示格式。

自定義日期格式

官網為我們提供了一個自定義格式的範例：

效果如下：

在這個官方範例中，使用到了moment這個庫，因此我們在npm包管理中加入moment依賴。

接下來我們分析這個例子。

可以看看到在TypeScript文件中，定義了個MY_FORMATS的常量：

通過使用Providers，將MY_FORMATS註冊成服務，這樣Angular就可以通過DI將MAT_DATE_FORMATS注入給Datepicker組件了。

那麼像我們上面提到的2019-07-11該如何自定義呢？

要實現這個格式還是比較簡單的，我們只需要修改MY_FORMATS，其他的內容不需要動，就可以實現我們想要的效果：

運行效果如下：

需要注意的是，我們要確保parse>dateInput和diplay>dateInput的格式保持一致。

總結

Material Datepicker目前還沒有支持像mydate 97那樣強大。如果需要在同一個表單中，多個input顯示不同的日期格式，就需要使用Angular的組件化特性，把每一種格式的日期封裝成一個獨立的組件，每個組件使用自己的Provider，這樣就可以在同一個表單中使用多個自定義組件，實現不同日期格式的需求。