无法在 angular bootstrap datepicker 控件中设置默认日期

如何解决无法在 angular bootstrap datepicker 控件中设置默认日期

我正在使用 Angular Bootstrap datepicker 控件来选择日期。我想在加载表单时在控件中设置默认日期。

这是我的 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'导入{可注射}； import { 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],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)
   };
  }
  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());

但它不起作用并显示以下错误：

错误类型错误：value.split 不是函数在 CustomAdapter.fromModel (date-formatter.service.ts:14) 在 NgbInputDatepicker.writeValue (ng-bootstrap.js:4465) 在 setUpControl (forms.js:1509) 在 FormGroupDirective.addControl (forms.js:5253) 在 FormControlName._setUpControl (forms.js:5835) 在 FormControlName.ngOnChanges (forms.js:5780) 在 FormControlName.rememberChangeHistoryAndInvokeOnChangesHook (core.js:1520) 在 callHook (core.js:2583) 在 callHooks (core.js:2542) 在 executeInitAndCheckHooks (core.js:2493)

解决方法

在您的组件中，将 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]
})