在angular Material Datepicker 之一 :自定义日期格式

现在我们使用angular的Material他为我们提供了一个时间组件Datepicker,默认的格式可能不适合中国用户,那么怎么才能更改样式如下呢:

  • 2019/10/11
  • 2019-10-11

开始工作

官网为我们提供了格式化处理方法

https://material.angular.io/components/datepicker/overview#customizing-the-parse-and-display-formats

官方这个案例需要我们安装:material-moment-adapter

因为ts中引用了

 

配置NgModule

你可以看到官方方式:

MY_NATIVE_DATE_FORMATS 会报错,所以我们把他替换成MAT_DATE_FORMATS

 

HTML文件

这个文件我们不动

 

ts中的修改

我们在ts中要做些调整,例如我们要实现 2019-11-15的效果!

只需修改

效果如下:

4165465198-5d26b6c01ed4a_articlex

ts代码我贴上来

 

 ts中获取这个格式的时间

如何让我们输入的数据,及时在ts中获取呢?

我们使用(input)和 (change) 事件,也就是dateInput和dateChange会在我们选择时间后,出发这个事件并调用里面的函数:

ts文件

 

 禁用input编辑

我并不希望,有些人乱搞,所以我不让他们随意在input中输入,只能通过选择时间来完成。

我们在mat-datepicker中加入了disabled=”false”

官方默认在<input matInput 中加入了disabled。(<input matInput [matDatepicker]=”dp3″ placeholder=”Input disabled” disabled>)

但因为我们使用了 [formControl]=”date”  ,所以不能在<input matInput 中加入disabled了。那该怎么办呢?

直接在ts中修改代码在new FormControl中加入disabled: true即可。

效果如下:

20191115195750

发表评论