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

Question

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

我尝试过这样的事情来放置自定义日期

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

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

假设如果我选择 2018 年 1 月 2 日，那么它也停留在当前月份，而不是移动到 1 月。我该如何解决这些问题？

下面是我的代码 & 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" 绑定(bind)，这样您就可以在更新模型时始终访问该页面:

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

在 Controller 中:

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