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

Question

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

我尝试了这样的事情，输入自定义日期

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

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

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

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

.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

Answer 2

创建 NgbDate 实例：

date = new NgbDate(2020,19,2);

将此日期设为 ngModel;

见 https://ng-bootstrap.github.io/#/components/datepicker/api#NgbDate