如何在ngBootstrap datepicker中将周日设置为一周的第一天
ngBootstrap datepicker设置一周第一天为周日解决方案
方案1:单个组件单独配置
只需要给ngb-datepicker组件添加输入属性[firstDayOfWeek]即可,属性值设置为7即代表周日为一周第一天(属性取值规则:1=周一、2=周二……7=周日),原有TS代码无需修改,修改后的HTML代码如下:
<div class="col-6"> <ngb-datepicker #d1 [(ngModel)]="model1" #c1="ngModel" [firstDayOfWeek]="7"></ngb-datepicker> <hr /> <button class="btn btn-sm btn-outline-primary" (click)="model1 = today"> Select Today </button> <hr /> <pre>Model: {{ model1 | json }}</pre> <pre>State: {{ c1.status }}</pre> </div>
方案2:全局配置所有日期选择器默认生效
如果项目中所有日期选择器都需要默认以周日为一周第一天,可直接在根模块AppModule中全局配置NgbDatepickerConfig,无需为每个组件单独添加属性:
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { NgbDatepickerConfig, NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { AppComponent } from './app.component'; import { DatepickerTodayComponent } from './datepicker-today.component'; @NgModule({ imports: [BrowserModule, NgbModule], declarations: [AppComponent, DatepickerTodayComponent], bootstrap: [AppComponent], providers: [ { provide: NgbDatepickerConfig, useFactory: () => { const config = new NgbDatepickerConfig(); config.firstDayOfWeek = 7; return config; } } ] }) export class AppModule { }
内容的提问来源于stack exchange,提问作者WhiteAB
相关产品推荐
相关产品推荐

