Module not found problem in angular bootstrap date formatter service

Question

I am creating an Angular 10 application. In my component I have used Angular Bootstrap datepicker control. The default date format shown in the textbox is 'yyyy-mm-dd'. But I want the format in 'dd-mm-yyyy'. So I have created a service and put in my Core Module. The service code is below:

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}` :
        '';
  }  
}

And my Core Module is:

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")
    }
  }
}

But I am getting the below error:

./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'

Can anyone suggest me how to solve the problem?

Answer 1

I found the solution. The below service can serve the purpose.

@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 : '';
  }
}

The put this service in the provider section of module. It will work to format the date after select from datepicker control.