ngx-material中Datepicker的日期格式化和选择语系
本文主要介绍ngx-material的Datepicker组件中对设定日期的格式和设定组件的语系。对于Datepicker的使用将一笔带过,详细使用可查看angular官网。
Datepicker组件的简单使用
下载安装ngx-material包,本人使用的是angular5,所以下载的ngx-material是5.2.5版本(PS:如果install失败,请使用淘宝镜像,自行百度一下)。具体ngx-material的使用点这里。
npm install @angular/material@5.2.5 --save 复制代码
在module中引入MatDatepickerModule
/**专门创建一个module,来管理ng-material模块的引入*/ import { MatDatepickerModule } from '@angular/material';@NgModule({imports:[MatDatepickerModule],exports: [MatDatepickerModule] })export class MyMaterialModule { } 复制代码
在html中使用mat-datepicker组件
<!-- 在html中使用datepicker --> <mat-form-field ><mat-label>日历使用demo</mat-label><input matInput [matDatepicker]="picker1" placeholder="yyyy/mm/dd" name="date" [(ngModel)]="_date"><mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle><mat-datepicker #picker1></mat-datepicker> </mat-form-field> 复制代码
设定Datepicker的日期格式
对于日期格式的处理,有2种方式。第一种是引入MatNativeDateModule,它是ng-material自带的;第二种是使用moment.js,引入MatMomentDateModule,需要通过npm安装。
引入MatNativeDateModule模式
使用MatNativeDateModule,不需要安装任何额外的包。
/**专门创建一个module,来管理ng-material模块的引入*/ import { MatDatepickerModule } from '@angular/material'; import { MatMomentDateModule } from '@angular/material-moment-adapter'; import { NativeDateAdapter } from "@angular/material";@NgModule({imports:[MatDatepickerModule,MatMomentDateModule],exports: [MatDatepickerModule,MatMomentDateModule],providers:[{ provide: DateAdapter, useClass: MyDateAdapter },{ provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS },] })export class MyMaterialModule { }export class MyDateAdapter extends NativeDateAdapter {format(date: Date, displayFormat: Object): string {if (displayFormat === "input") {const day = date.getDate();const month = date.getMonth() + 1;const year = date.getFullYear();return year + '/' + this._to2digit(month) + '/' + this._to2digit(day);} else {return date.toDateString();}}private _to2digit(n: number) {return ('00' + n).slice(-2);} }export const MY_DATE_FORMATS = {parse: {dateInput: { month: 'short', year: 'numeric', day: 'numeric' }},display: {dateInput: 'input',monthYearLabel: { year: 'numeric', month: 'short' },dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric' },monthYearA11yLabel: { year: 'numeric', month: 'long' },} }; 复制代码
引入MatMomentDateModule模式
使用MatMomentDateModule,需要安装@angular/material-moment-adapter和moment,安装时注意版本要和自己使用的angular版本相对应,否则可能出现不了你想要的效果。如果没有安装moment,在你的项目引入MatMomentDateModule之后,运行项目会报很多的红色错误。
安装@angular/material-moment-adapter和moment
//安装@angular/material-moment-adapter,一定要注意版本,和你的angular版本相匹配 npm install @angular/material-moment-adapter@5.2.5 --save //安装moment(如果没有安装moment,在项目引入MatMomentDateModule后运行项目会报错) npm install moment --save 复制代码
引入MatMomentDateModule,并且创建一个自定义的MY_DATE_FORMATS代替原来的MAT_DATE_FORMATS。
/**专门创建一个module,来管理ng-material模块的引入*/ import { MatDatepickerModule } from '@angular/material'; import { MatMomentDateModule } from '@angular/material-moment-adapter';@NgModule({imports:[MatDatepickerModule,MatMomentDateModule],exports: [MatDatepickerModule,MatMomentDateModule],providers:[{provide:MAT_DATE_FORMATS,useValue:MY_DATE_FORMATS}] })export class MyMaterialModule { }export const MY_DATE_FORMATS = {parse: {dateInput: 'YYYY/MM/DD'},display: {dateInput: 'YYYY/MM/DD',monthYearLabel: 'YYYY MMM',dateA11yLabel: 'YYYY/MM/DD',monthYearA11yLabel: 'YYYY MMM'} }; 复制代码
设定Datepicker的语系
如果要设定Datepicker的语系,建议在日期格式化时就使用第二种方式——引入MatMomentDateModule模式,这样可以在设定语系时更加方便。只需要在providers中修改MAT_DATE_LOCALE的值,改成自己想要的语系。那么moment支持哪些语系呢?答案在这里我们也可以根据项目中语序的变化,改变Datepicker的语系,使用DateAdapter的setLocale方法。
/**专门创建一个module,来管理ng-material模块的引入*/
import { MatDatepickerModule,DateAdapter } from '@angular/material';
import { MatMomentDateModule } from '@angular/material-moment-adapter';
import { TranslateService, LangChangeEvent } from '@ngx-translate/core';
@NgModule({imports:[MatDatepickerModule,MatMomentDateModule],exports: [MatDatepickerModule,MatMomentDateModule],providers:[{provide:MAT_DATE_FORMATS,useValue:MY_DATE_FORMATS},/**多加这一行*/{ provide: MAT_DATE_LOCALE, useValue: 'zh-CN' },]
})export class MyMaterialModule {/**根据项目中语系的变化而变化*/
constructor(private translate: TranslateService, private adapter: DateAdapter<any>) {translate.onLangChange.subscribe((params: LangChangeEvent) => {let lang = 'zh-CN';switch (params.lang) {case 'zh_cn':lang = 'zh-CN';break;case 'zh_tw':lang = 'zh-TW';break;case 'en':lang = 'en-GB';break;default:break;}adapter.setLocale(lang);});}
}export const MY_DATE_FORMATS = {parse: {dateInput: 'YYYY/MM/DD'},display: {dateInput: 'YYYY/MM/DD',monthYearLabel: 'YYYY MMM',dateA11yLabel: 'YYYY/MM/DD',monthYearA11yLabel: 'YYYY MMM'}
};
复制代码
转载于:https://juejin.im/post/5ba206e9f265da0ae343ecb5
ngx-material中Datepicker的日期格式化和选择语系相关推荐
- MS SQL Server中的CONVERT日期格式化大全
來源:http://www.knowsky.com/345490.html CONVERT 将某种数据类型的表达式显式转换为另一种 数据类型.由于某些需求经常用到取日期格式的不同.现以下可在 SQL ...
- 如何通过数据库SQL Server 2014中的SQL日期格式化语句来转换出我们需要的日期格式化日期时间格式转换的教程方法
如何通过数据库SQL Server 2014中的SQL日期格式化语句来转换出我们需要的日期格式化日期时间格式转换的教程方法 作者:张国军_Suger 开发工具与关键技术:SQL Server 2014 ...
- elementui中date-picker当前年之后不可选择
elementui中date-picker当前年之后不可选择 <el-date-pickerv-model="time"type="year":picke ...
- 在vue、html中手动写日期格式化转换为“yyyy-MM-dd hh:mm:ss”
做前端页面的时候,貌似日期格式化是没有预置的,需要自己写(当然大部分都是直接C+V了),但是觉得那些方法不容易看懂,而且对于小白来说,用起来也不是那么地方便,于是自己写了一个简单的日期格式化函数. 在 ...
- Python中的datetime日期格式化
import datetime datetime.datetime.now() 上述会返回 microsecond(微秒),这个是我们不需要的,因此得做一下修改 datetime.datetime.n ...
- Asp.net中具体的日期格式化用法
1.绑定时格式化日期方法: <ASP:BOUNDCOLUMN DATAFIELD= "JoinTime " DATAFORMATSTRING= "{0:yyyy- ...
- Android中简单的日期格式化
自己遇到的一点格式化日期的方法,记下来 // 今天的信息 显示时间 dateStr = DateFormat.getTimeFormat(context).format ...
- 跨年过程中因日期格式化引发的生产故障:格式化方式YYYYMMdd和yyyyMMdd的区别
文章目录 故障背景 故障分析 故障重现 解释总结 故障背景 某公司进行一年一度的跨年上线工作,在2018年的12月30号上午忽然接到保障业务无法运行,而且影响全国业务. 故障分析 第一步:因为近期没有 ...
- python中当地时间_Python 日期和时间
Python日期和时间 阅读本文需要4分钟 Python 程序能用很多方式处理日期和时间,转换日期格式是一个常见的功能. Python 提供了一个 time 和 calendar 模块可以用于格式化日 ...
最新文章
- flutter开发中常用的dart插件
- sql将一列拆分为多列_SQL的弱点(2):不支持从所有列中去除某列
- 访问域名不走dns服务问题排查,报错could not resolve host
- Linux 列出文件列表命令ls
- 多线程相互排斥--mutex(二)
- Spring之装配Bean(一)
- 解决无法删除表,提示被外键约束引用
- ps绿化工具_绿化消防车价位
- Java基础面试题与答案
- python项目-每日日考系统-数据结构
- 虚拟机linux和主机网络连接,linux虚拟机中和主机三种网络连接方式的区别
- 魅族16s Pro最新预热海报公布:将配备双扬声器
- RedHat 5.4+ Postfix +Extmail实现基于虚拟用户的邮件系统(三)
- BZOJ 3875 - SPFA处理带环的DP
- 怎么安装python3.7.3_windows系统安装python3.6.3和python3.7.0
- mysql 查询的关键词的执行顺序
- GLIBCXX_3.4.21 not found(转载)
- 在Windows下搭建Vue开发环境
- python批量修改文件名加后缀_python文件操作之批量修改文件后缀名的方法
- 18.数据统计之分组对象与apply函数