0

我正在创建一个 Angular 10 应用程序。在我的组件中，我使用了 Angular Bootstrap 日期选择器控件。文本框中显示的默认日期格式为“yyyy-mm-dd”。但我想要'dd-mm-yyyy'的格式。所以我创建了一个服务并放入我的核心模块。服务代码如下：

import { Injectable } from '@angular/core';
import { NgbDateParserFormatter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
import { isNumber, padNumber, toInteger } from '@ng-bootstrap/ng-bootstrap/util/util';

@Injectable()
export class CustomDateFormatterService extends NgbDateParserFormatter {
  parse(value: string): NgbDateStruct {
    if (value) {
      const dateParts = value.trim().split('-');
      if (dateParts.length === 1 && isNumber(dateParts[0])) {
        return {day: toInteger(dateParts[0]), month: null, year: null};
      } else if (dateParts.length === 2 && isNumber(dateParts[0]) && isNumber(dateParts[1])) {
        return {day: toInteger(dateParts[0]), month: toInteger(dateParts[1]), year: null};
      } else if (dateParts.length === 3 && isNumber(dateParts[0]) && isNumber(dateParts[1]) && isNumber(dateParts[2])) {
        return {day: toInteger(dateParts[0]), month: toInteger(dateParts[1]), year: toInteger(dateParts[2])};
      }
    }
    return null;
  }
  
  format(date: NgbDateStruct): string {
    return date ?
        `${isNumber(date.day) ? padNumber(date.day) : ''}/${isNumber(date.month) ? padNumber(date.month) : ''}/${date.year}` :
        '';
  }  
}

我的核心模块是：

import { ErrorHandler, NgModule, Optional, SkipSelf } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { ClientSideErrorHandlerService } from './error-handler-service/client-side-error-handler.service';
import { ApiService } from './api-service/api.service';
import { HttpErrorHandlerServiceService } from './http-error-handler-service/http-error-handler-service.service';
import { NgbDateParserFormatter, NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { CustomDateFormatterService } from './date-formatter-service/custom-date-formatter.service';


@NgModule({
  imports: [
    CommonModule,
    HttpClientModule,
    NgbModule,
  ],
  declarations: [],
  exports: [
    //NgbModule,
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: HttpErrorHandlerServiceService, multi: true },
    { provide: ErrorHandler, useClass: ClientSideErrorHandlerService },
    { provide: NgbDateParserFormatter, useClass: CustomDateFormatterService },
    ApiService,
  ]
})
export class CoreModuleModule {
  constructor(@Optional() @SkipSelf() core: CoreModuleModule) {
    if (core) {
      throw new Error("You should import core module only in the root module")
    }
  }
}

但我收到以下错误：

./src/app/core-module/date-formatter-service/custom-date-formatter.service.ts Module not found: Error: Can't resolve '@ng-bootstrap/ng-bootstrap/util/util' in 'D:\Workspace\My Projects\e-Cash Apps\eCash-Web\src\app\core-module\date-formatter-service'

谁能建议我如何解决这个问题？

4

1 回答 1

0

我找到了解决方案。以下服务可以达到目的。

@Injectable()
export class CustomDateParserFormatter extends NgbDateParserFormatter {

  readonly DELIMITER = '-';

  parse(value: string): NgbDateStruct | null {
    if (value) {
      let date = value.split(this.DELIMITER);
      return {
        day: parseInt(date[0], 10),
        month: parseInt(date[1], 10),
        year: parseInt(date[2], 10)
      };
    }
    return null;
  }

  format(date: NgbDateStruct | null): string {            
    return date ? date.day + this.DELIMITER + date.month + this.DELIMITER + date.year : '';
  }
}

将此服务放在模块的提供程序部分。从日期选择器控件中选择后，它将用于格式化日期。

于 2021-01-03T17:39:27.310 回答