無法在 angular bootstrap datepicker 控件中設置默認日期

Question

我正在使用 AngularBootstrap 日期選擇器控件來選擇日期。 我想在加載表單時在控件中設置默認日期。

這是我的 HTML 代碼：

<div class="input-group">
  <input class="form-control" placeholder="dd-mm-yyyy" id="startDate" name="startDate"
    formControlName="startDate" [(ngModel)]="selectedStartDate" ngbDatepicker
    #d="ngbDatepicker" [ngClass]="{ 'is-invalid': submitted && f.startDate.errors }">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
  </div>
</div>

我還在 datepicker 中使用了兩個服務來重新編寫日期：

從“@angular/core”導入{可注射}； 導入 { NgbDateAdapter, NgbDateParserFormatter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';

/**
 * This Service handles how the date is represented in scripts i.e. ngModel.
 */
@Injectable()
export class CustomAdapter extends NgbDateAdapter<string> {
    
 readonly DELIMITER = '/';
    
 fromModel(value: string | null): NgbDateStruct | null {
  if (value) {
   let date = value.split(this.DELIMITER);
   return {
    day: parseInt(date[0], 10),
    month: parseInt(date[1], 10),
    year: parseInt(date[2], 10)
   };
  }
  return null;
 }
    
 toModel(date: NgbDateStruct | null): string | null {
  return date ? date.day + this.DELIMITER + date.month + this.DELIMITER + date.year : null;
 }
}
    
    
/**
 * This Service handles how the date is rendered and parsed from keyboard i.e. in the bound input field.
 */
@Injectable()
export class CustomDateParserFormatter extends NgbDateParserFormatter {
    
 readonly DELIMITER = '-';
    
 parse(value: string): NgbDateStruct | null {
  if (value) {
   let 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 {
  let dDay = "";
  let mMonth = "";
    
  if (date !== null) {
   if (date.day <= 9) {
    dDay = "0" + date.day;
   }
   else {
    dDay = (date.day).toString();
   }
    
   if (date.month <= 9) {
    mMonth = "0" + date.month;
   }
   else {
    mMonth = (date.month).toString();
   }
  }
    
  //return date ? date.day + this.DELIMITER + date.month + this.DELIMITER + date.year : '';
  return date ? dDay + this.DELIMITER + mMonth + this.DELIMITER + date.year : '';
 }
}

在我的組件 OnInit 方法中，我使用以下代碼來設置默認日期，即： this.frmTransferHistory.controls["startDate"].setValue(new Date());

但它不起作用並顯示以下錯誤：

ERROR TypeError: value.split is not a function at CustomAdapter.fromModel (date-formatter.service.ts:14) at NgbInputDatepicker.writeValue (ng-bootstrap.js:4465) at setUpControl (forms.js:1509) at FormGroupDirective。 addControl (forms.js:5253) at FormControlName._setUpControl (forms.js:5835) at FormControlName.ngOnChanges (forms.js:5780) at FormControlName.rememberChangeHistoryAndInvokeOnChangesHook (core.js:1520) at callHook (core.js:2583)在 callHooks (core.js:2542) at executeInitAndCheckHooks (core.js:2493)

Answer 1

在您的組件中，將 DatePipe 添加到構造函數並初始化您的日期：

constructor(
  private datePipe: DatePipe
) { }

yourForm: any = {
  date: this.datePipe.transform(new Date(1999, 6, 15), "yyyy-MM-dd")
}

在您的模板中：

<form>
  <div class="form-group">
    <label for="date">Date</label>
    <input
      type="date"
      name="date"
      id="date"
      class="form-control"
      [(ngModel)]="yourForm.date"
    />
  </div>
</form>

type="date"將使日期格式本地化。 如果您的瀏覽器設置為格式為“dd-MM-yyyy”的區域設置，它將以您想要的方式顯示。

在你模塊中：

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [DatePipe], // <-----
  bootstrap: [AppComponent]
})