Angular ngbDatePicker显示日期格式

Question

目前我正在使用 NgbDatePicker。这是我的html代码

      <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>

日期显示如下

我需要将此显示日期格式更改为 25/03/2020。我如何在 NgbDatePicker

中执行此操作

Answer 1

您需要扩展 NgbDateParserFormatter 并覆盖默认提供程序。

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}
   ]

来源：https://github.com/ng-bootstrap/ng-bootstrap/issues/2072

Answer 2

你可以写customDateParserFormatter来解析日期

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

并在您的组件中注入 customDateParserFormatter

@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>

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

Angular ngbDatePicker显示日期格式

Angular ngbDatePicker display date format

datepicker

ng-bootstrap

angular