無法在 Angular 中將日期設置為 ng Bootstrap 日期選擇器

Question

我在 Angular 工作，在那里我以反應形式使用 ng Bootstrap Datepicker

我嘗試將值設置為帶有補丁值的 ngBootstrap DatePicker 但無法為其設置值

我正在分享我的代碼

html

<div class="form-group required control-label">
  <label>Date of Joining</label>
  <!-- <input type="text" class="form-control" formControlName="doj"  placeholder=""/> -->
  <div class="form-group">
    <div class="input-group">
      <input class="form-control"  formControlName="doj" placeholder="yyyy-mm-dd" name="dp" ngbDatepicker
                #e="ngbDatepicker">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary calendar" (click)="e.toggle()" type="button"></button>
      </div>
    </div>
  </div>
</div> 

TS

this.employeeForm.patchValue({
  doj: this.date
})

Answer 1

ngbDatepicker 使用 NgbDateStruct 接口作為模型而不是本機 Date 對象。

this.employeeForm.patchValue({
doj : { year: 2020, month: 2, day: 6 } // should be { year , month , date } format
})

或創建自定義解析器格式化程序。

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