You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.02 03:09:04