Angular ngbDatePicker display date format

Question

Currently I am using NgbDatePicker. this is is my html code

      <div class="input-group">
                            <input class="form-control ngbfield" [minDate]="minDate" 
                                (dateSelect)="loadCheckinTime(checkin.checkdate)"   
                                name="checkdate" [readonly]="true" #vvl="ngModel" [(ngModel)]="checkin.checkdate"
                                ngbDatepicker [markDisabled]="isDisabled" #dd1="ngbDatepicker" required>
                            <div class="input-group-append">
                                <button [disabled]="!checkin.branch"
                                    class="btn btn-outline-secondary fa fa-calendar" (click)="dd1.toggle()"
                                    type="button"></button>
                            </div>
                        </div>

date is display like below

I need to change this display date format like 25/03/2020. How I do this in the NgbDatePicker

Joosep Parts · Accepted Answer · 2022-03-22 04:35:15Z

2

You need to extend NgbDateParserFormatter and override the default provider.

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

@Injectable()
export class NgbDateCustomParserFormatter 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}` :
        '';
  }
}

@NgModule

providers: [
    {provide: NgbDateParserFormatter, useClass: NgbDateCustomParserFormatter}
   ]

Source: https://github.com/ng-bootstrap/ng-bootstrap/issues/2072

answered Mar 22, 2022 at 4:35

Joosep Parts

6,3452 gold badges13 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kumara Over a year ago

do i need to any changes in HTML page ?

Joosep Parts Over a year ago

I don't think so. Provider should be global.

lokopi Over a year ago

I am getting this error :- Module not found: Error: Package path ./util/util is not exported from package \node_modules\@ng-bootstrap\ng-bootstrap (see exports field in \node_modules\@ng-bootstrap\ng-bootstrap\package.json)

Joosep Parts Over a year ago

Follow the documentation for installation. ng-bootstrap.github.io/#/getting-started

Arunkumar Ramasamy · Accepted Answer · 2022-03-22 05:16:36Z

you can write customDateParserFormatter for date parsing

@Injectable()
export class CustomDateParserFormatter extends NgbDateParserFormatter {
  readonly DELIMITER = '/';

  parse(value: string): NgbDateStruct | null {
    if (value) {
      const 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.month + this.DELIMITER + date.day + this.DELIMITER + date.year
      : '';
  }
}

And inject you customDateParserFormatter in your component

@Component({
  selector: 'ngbd-datepicker-adapter',
  templateUrl: './datepicker-adapter.html',

  // NOTE: For this example we are only providing current component, but probably
  // NOTE: you will want to provide your main App Module
  providers: [
    { provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter },
  ],
})
export class NgbdDatepickerAdapter {
  model2: string;

  constructor(
    private ngbCalendar: NgbCalendar,
    private dateAdapter: NgbDateAdapter<string>
  ) {}
}

*Component.html

<div class="col-6">
  <form class="row row-cols-sm-auto">
    <div class="col-12">
      <div class="input-group">
        <input
          class="form-control"
          placeholder="mm/dd/yyyy"
          name="d2"
          #c2="ngModel"
          [(ngModel)]="model2"
          ngbDatepicker
          #d2="ngbDatepicker"
        />
        <button
          class="btn btn-outline-secondary calendar"
          (click)="d2.toggle()"
          type="button"
        ></button>
      </div>
    </div>
  </form>
</div>

Reference: https://stackblitz.com/edit/angular-ikdpp5?file=src%2Fapp%2Fdatepicker-adapter.html

Collectives™ on Stack Overflow

Angular ngbDatePicker display date format

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related