如何使用 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" 绑定，这样您就可以在更新模型时始终访问该页面：

<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

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

How to set custom date programmatically using ng bootstrap & angular 6?

typescript

bootstrap-datepicker

ng-bootstrap

angular