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

Question

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

我试过这样的事情，把自定义日期

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

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

假设如果我选择 2nd jan 2018 那么它也停留在当月它不会移动到 jan。我该如何解决这些问题？

下面是我的代码和堆栈闪电战链接

.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