博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Angular 学习笔记 (Material Datepicker)
阅读量:6893 次
发布时间:2019-06-27

本文共 1328 字,大约阅读时间需要 4 分钟。

https://material.angular.io/components/datepicker/overview

官网介绍很清楚了,这里记入一下我比较不熟悉的.

1. moment js 

Angular 推荐我们使用 moment js 

如果是全场都用的话,可以全局注入 MatMomentDateModule.

如果是想全局用原生的就注入 MatNativeDateModule

想要 override 就在 compoent 层级注入.

providers: [  { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },  { provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS },  { provide: MAT_DATE_LOCALE, useValue: 'zh-CN' }, //注意 moment 是 zh-CN 和 ng 不一样 /.\] or
  providers: [
    { provide: MAT_DATE_FORMATS, useValue: MAT_NATIVE_DATE_FORMATS },
    { provide: DateAdapter, useClass: NativeDateAdapter },
    { provide: MAT_DATE_LOCALE, useValue: 'zh-Hans' }
 ],

 

依赖注入的机制,我感觉不是很方便,如果我想在一个 component 内使用 2 种 datepicker 不是不行吗 ? 

用 moment 后,我们的类型就是 Moment 而不是 Date 了 

new Date() 变成了 moment()

想要替换 display 的格式, 就 override MAT_DATE_FORMATS

export const MY_MOMENT_DATE_FORMATS: MatDateFormats = {  parse: {    dateInput: 'DD MMM YYYY', // moment format  },  display: {    dateInput: 'DD MMM YYYY', // moment format    monthYearLabel: 'MMM YYYY',    dateA11yLabel: 'LL',    monthYearA11yLabel: 'MMMM YYYY',  },};providers: [  { provide: MAT_DATE_FORMATS, useValue: MY_MOMENT_DATE_FORMATS },]

想换 locale 就 override MAT_DATE_LOCALE, 注意 moment 使用 zh-CN 而 angular 是 zh-Hans. 不只是中文,还有其它也不一样,自己查查看哦

 

转载于:https://www.cnblogs.com/keatkeat/p/9853083.html

你可能感兴趣的文章
搭建maven环境
查看>>
中国大学MOOC-C程序设计(浙大翁恺)—— 时间换算
查看>>
爬豆瓣电影名
查看>>
深度学习之各种网络结构
查看>>
leetcode20: Insert Interval
查看>>
GNU make: Learning notes
查看>>
泛型程序设计---泛型方法的定义
查看>>
一个“MacBook”新手的Python“笨办法”自学之旅 #第九章:Python的函数
查看>>
codetest
查看>>
自己实现文本相似度算法(余弦定理)
查看>>
卡尔曼滤波小结
查看>>
Windows Server 2008 R2 负载平衡入门篇
查看>>
前后端联调
查看>>
OpenCV与QT联合编译 分类: Eye_Detection ...
查看>>
LNMP架构介绍
查看>>
洛谷3986
查看>>
ssh服务
查看>>
Eclipse的基本使用
查看>>
构建之法 第五章 团队和流程
查看>>
(转)如何在eclipse的配置文件里指定jdk路径
查看>>