2

I am using ng-boostrap for datepicker:https://ng-bootstrap.github.io/#/components/datepicker/api But i do not know how to change date format like dd/mm/yyyy. Now it is displaying yyyy/mm/dd but i want like dd/mm/yyyy.Please help anyone.

Demo:https://stackblitz.com/edit/angular-6wpn3h-ahcq4x?file=src/app/datepicker-popup.html

  <div class="input-group">
  <input class="form-control" placeholder="dd/mm/yyyy"
         name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
  </div>
  </div>
Pappa S
  • 303
  • 1
  • 8
  • 21

1 Answers1

8

Using ng-bootstrap's NgbDateISOParserFormatter as a guide, create a custom formatter in datepicker-popup.ts. The code below is (IMO) a little more straightforward than the original and doesn't rely on importing util.ts:

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

function padNumber(value: number | null) {
  if (!isNaN(value) && value !== null) {
    return `0${value}`.slice(-2);
  } else {
    return '';
  }
}

@Injectable()
export class NgbDateCustomParserFormatter extends NgbDateParserFormatter {
  parse(value: string): NgbDateStruct | null {
    if (value) {
      const dateParts = value.trim().split('/');

      let dateObj: NgbDateStruct = { day: <any>null, month: <any>null, year: <any>null }
      const dateLabels = Object.keys(dateObj);

      dateParts.forEach((datePart, idx) => {
        dateObj[dateLabels[idx]] = parseInt(datePart, 10) || <any>null;
      });
      return dateObj;
    }
    return null;
  }

  format(date: NgbDateStruct | null): string {
    return date ?
        `${padNumber(date.day)}/${padNumber(date.month)}/${date.year || ''}` :
        '';
  }
}

Then import NgbDateCustomParserFormatter and set the provider in @NgModule in datepicker-popup.module.ts:

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

I've forked your StackBlitz and added this functionality here.

jdaz
  • 5,964
  • 2
  • 22
  • 34
  • Date is coming like this: 024/06/2020 Please see: https://stackblitz.com/edit/angular-6wpn3h-dbvhfx?file=src/app/datepicker-popup.ts – Pappa S Jun 01 '20 at 06:54
  • Ah sorry about that, I had it returning a two-digit year. To change to a four-digit year, don't change `padNumber` to `slice(-4)`. Instead, just remove the call to `padNumber` on `date.year` in the formatted return string. Fixed above and in my StackBlitz link. – jdaz Jun 01 '20 at 07:29
  • Again it is coming in alert (26/6/2020) .If month is single digit zero should be add before that. How to do it? see: https://stackblitz.com/edit/angular-6wpn3h-mwfgxl?file=src/app/datepicker-popup.ts – Pappa S Jun 01 '20 at 09:48
  • The widget returns an `NgbDate` object, so if you want a particular string formatting you have to format it again. If you make the `NgbDateCustomParserFormatter` `format()` method static you can reuse it like I've done here: https://stackblitz.com/edit/angular-6wpn3h-ulkpmc – jdaz Jun 01 '20 at 18:02