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，这样就可以在同一个表单中使用多个自定义组件，实现不同日期格式的需求。