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

      <div >
                            <input  [minDate]="minDate" 
                                (dateSelect)="loadCheckinTime(checkin.checkdate)"   
                                name="checkdate" [readonly]="true" #vvl="ngModel" [(ngModel)]="checkin.checkdate"
                                ngbDatepicker [markDisabled]="isDisabled" #dd1="ngbDatepicker" required>
                            <div >
                                <button [disabled]="!checkin.branch"
                                     (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

CodePudding user response：

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

CodePudding user response：

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 >
  <form >
    <div >
      <div >
        <input
          
          placeholder="mm/dd/yyyy"
          name="d2"
          #c2="ngModel"
          [(ngModel)]="model2"
          ngbDatepicker
          #d2="ngbDatepicker"
        />
        <button
          
          (click)="d2.toggle()"
          type="button"
        ></button>
      </div>
    </div>
  </form>
</div>

Reference: https://stackblitz.com/edit/angular-ikdpp5?file=src/app/datepicker-adapter.html