如何使用ng bootstrap＆angular 6以编程方式设置自定义日期？

Question

在这里，我试图使用ng-bootstrap日期选择器以编程方式设置日期

我尝试了这样的定制日期

this.model= {
  "year": 2018,
  "month": 8,
  "day": 15
}

我知道这不是有效的方式，有一个问题是，在选择给定后，日期选择器不会导航到该特定月份。

假设如果我选择2018年2月2日那么它也会在当月保持不变为jan。我该如何解决这些问题？

下面是我的代码和stack blitz link

.ts代码

model: NgbDateStruct;
  date: {year: number, month: number};
  constructor(private calendar: NgbCalendar){

  }

   selectToday() {
    this.model = this.calendar.getToday();
  }

  select(){
    this.model= {
  "year": 2018,
  "month": 8,
  "day": 15
}

.html文件

<ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker>

Answer 1

只需使用[startDate]="model"绑定，以便在更新模型时始终进入页面：

<ngb-datepicker #dp [(ngModel)]="model" [startDate]="model" (navigate)="date = $event.next"></ngb-datepicker>

或者您可以通过dp.navigateTo(model)方法手动导航日历：

<ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker>

<button class="btn btn-sm btn-outline-primary mr-2" (click)="selectToday(dp)">Select Today</button>
<button class="btn btn-sm btn-outline-primary mr-2" (click)="select(dp)">Select Custom</button>

在控制器中：

selectToday(dp) {
  this.model = this.calendar.getToday();
  dp.navigateTo(this.model);
}

select(dp){
  this.model = {
    "year": 2018,
    "month": 8,
    "day": 15
  }
  dp.navigateTo(this.model);
}

更多关于此：https://ng-bootstrap.github.io/#/components/datepicker/overview#navigation

更新的例子：https://stackblitz.com/edit/angular-knmpxc

手动解决方案：https://stackblitz.com/edit/angular-uvmjg4