我在这里尝试使用 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>
最佳答案
只需使用 [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
关于angular - 如何使用 ng bootstrap 和 angular 6 以编程方式设置自定义日期?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52314348/