Question

我有一个可以使用Angular Material的Datepicker，但是我想用匈牙利日期表示法格式化其日期。例如今天是2019.01.25。当前日期选择器的格式为25/01/2019。我尝试使用StackOverflow和Google的示例，但显示格式为Fri Jan 25 2019，而不是我的格式。问题是什么？

app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { ServerService } from './server.service';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

import {
  MatButtonModule,
  MatFormFieldModule,
  MatInputModule,
  MatRippleModule,
  MatAutocompleteModule,
  MatDatepickerModule,
  MatNativeDateModule,
  MAT_NATIVE_DATE_FORMATS,
  DateAdapter
} from '@angular/material';

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

import { CustomDateAdapter} from './app.customdateadapter';

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'},
  }
};

@NgModule({
  exports: [
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule,
    MatRippleModule,
    MatAutocompleteModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpModule,
    MatDatepickerModule,
    MatNativeDateModule
  ],
  declarations: [],
  imports: []
})
export class MaterialModule {}

@NgModule({
  declarations: [],
  imports: [],
  exports: [MatDatepickerModule, MatNativeDateModule],
  providers: [
     {
        provide: DateAdapter, useClass: CustomDateAdapter
     },
     {
        provide: MAT_NATIVE_DATE_FORMATS, useValue: MY_DATE_FORMATS
     }
  ]
})

export class DatePickerModule {

}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    MaterialModule,
    BrowserModule,
    DatePickerModule
  ],
  providers: [ServerService],
  bootstrap: [
    AppComponent,
  ],
  schemas: [],
})
export class AppModule { }

app.customdateadapter.ts

import { NativeDateAdapter } from '@angular/material';

export class CustomDateAdapter extends NativeDateAdapter {
  format(date: Date, displayFormat: Object): string {
     if (displayFormat === 'input') {
        const day = date.getUTCDate();
        const month = date.getUTCMonth() + 1;
        const year = date.getFullYear();

        return `${year}.${month}.${day}`;
     } else {
        return date.toDateString();
     }
  }

}

Answer 1

好的，所以您有一个对象。您无法将其与纯字符串进行比较。请改用这种方式尝试并检查字段year是否存在。因此，您可以确定拥有正确的对象：

import { NativeDateAdapter } from '@angular/material';

export class CustomDateAdapter extends NativeDateAdapter {
  format(date: Date, displayFormat: any): string {
     if (displayFormat.year) {
        return displayFormat.year + '.' + displayFormat.month + '.' + displayFormat.day;
     } else {
        return date.toDateString();
     }
  }
}

或您的日期格式

import { NativeDateAdapter } from '@angular/material';

export class CustomDateAdapter extends NativeDateAdapter {
  format(date: Date, displayFormat: any): string {
     if (displayFormat.year) {
         const day = date.getUTCDate();
         const month = date.getUTCMonth() + 1;
         const year = date.getFullYear();

        return year + '.' + month + '.' + day;
     } else {
        return date.toDateString();
     }
  }
}

Angular Material的日期格式

1 个答案: