我正在研究 Angular7 及其兼容的 ngx-mat-datetime-picker。它按预期工作。
想要自定义格式:
实际:
mm/dd/yyyy, hh:mm:ss
预期: yyyy-mm-dd hh:mm:ss
目前我找不到任何格式化选项。
我在模板中尝试了类似的方法
value="{{ mydate | date: 'yyyy-mm-dd hh:mm:ss' }}
但不工作。
您需要创建自定义适配器并指定自定义格式
const CUSTOM_DATE_FORMATS: NgxMatDateFormats = {
parse: {
dateInput: 'l, LTS'
},
display: {
dateInput: 'YYYY-MM-DD HH:mm:ss',
monthYearLabel: 'MMM YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY',
}
};
@NgModule({
providers: [
{
provide: NgxMatDateAdapter,
useClass: CustomNgxDatetimeAdapter,
deps: [MAT_DATE_LOCALE, NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS]
},
{ provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS }
],
})
export class CustomNgxDateTimeModule { }
请从下面的要点中找到 CustomNgxDatetimeAdapter.ts
https://gist.github.com/nandhakumargdr/635af05419793e15f3758656ddd1ef39
已经测试过。它正在工作!
创建一个常量:(插入您喜欢的格式)
export const DATE_TIME_FORMAT = {
parse: {
dateInput: 'l, LT',
},
display: {
dateInput: 'l, LT',
monthYearLabel: 'MM yyyy',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY',
}
提供:
{provide: NGX_MAT_DATE_FORMATS, useValue: DATE_TIME_FORMAT}
结果(我的格式删除了秒):
9/4/2020, 1:11 PM
这是我找到的最好的解决方案
import {
// modules
NgxMatDatetimePickerModule,
NgxMatDateFormats,
NGX_MAT_DATE_FORMATS,
} from '@angular-material-components/datetime-picker';
import { NgxMatMomentModule, NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular-material-components/moment-adapter';
export const MOMENT_DATETIME_WITH_SECONDS_FORMAT = 'YYYY-MM-DD HH:mm:ss';
// If using Moment
const CUSTOM_MOMENT_FORMATS: NgxMatDateFormats = {
parse: {
dateInput: MOMENT_DATETIME_WITH_SECONDS_FORMAT,
},
display: {
dateInput: MOMENT_DATETIME_WITH_SECONDS_FORMAT,
monthYearLabel: 'MMM YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY',
},
};
@NgModule({
declarations: [],
imports: [
MatDatepickerModule,
MatMomentDateModule,
NgxMatMomentModule,
NgxMatDatetimePickerModule,
],
exports: [
MatDatepickerModule,
MatMomentDateModule,
NgxMatMomentModule,
NgxMatDatetimePickerModule,
],
providers: [
// values
{ provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } },
{ provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_MOMENT_FORMATS },
{ provide: NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } },
],
})
export class AppModule { }