ngbBootstrap DatePicker 配置集 firstDayOfWeek

Question

我正在尝试将 ngbBootstrap 日期选择器配置为使用星期日作为一周的第一天。根据 docs 看来这应该是超级简单的。我使用的是 NgbBootstrap v1.1.2，但代码中的文档与当前文档相同：

Configuration service for the NgbDatepicker component. You can inject this service, typically in your root component, and customize the values of its properties in order to provide default values for all the datepickers used in the application.

import { NgbDatepickerConfig } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  //...

  constructor(
    private ngbDatepickerConfig: NgbDatepickerConfig
  ) {
    ngbDatepickerConfig.firstDayOfWeek = 7;
  }

  //...
}

知道为什么仍设置为星期一吗？

更新

如果我覆盖服务默认值似乎可以工作：

{
  provide: NgbDatepickerConfig,
  useClass: class Test {
    dayTemplate: TemplateRef<DayTemplateContext>;
    dayTemplateData: (date: NgbDateStruct, current: { year: number, month: number }) => any;
    footerTemplate: TemplateRef<any>;
    displayMonths = 1;
    firstDayOfWeek = 7;
    markDisabled: (date: NgbDateStruct, current: { year: number, month: number }) => boolean;
    minDate: NgbDateStruct;
    maxDate: NgbDateStruct;
    navigation: 'select' | 'arrows' | 'none' = 'select';
    outsideDays: 'visible' | 'collapsed' | 'hidden' = 'visible';
    showWeekdays = true;
    showWeekNumbers = false;
    startDate: { year: number, month: number };
  }
}

Answer 1

不知道为什么，但是当所有子组件都延迟加载时，它在根组件上不起作用。我将它应用于一个公共组件，用作所有功能模块路由子项的父组件，它按预期在整个应用程序中工作。

Answer 2

我的做法是

1.-创建一个class datePicker-config（这是一个简单的class TypeScript）

import {NgbDatepickerConfig} from '@ng-bootstrap/ng-bootstrap';

export class CustomDatePickerConfig extends NgbDatepickerConfig {
    firstDayOfWeek=3;
}

2.-在模块中的 NgbDatepickerConfig 提供程序中使用此 class

@NgModule({
  imports: [...],
  declarations: [...],
  providers:[{provide: NgbDatepickerConfig,useClass: CustomDatePickerConfig}]
  ...
})

ngbBootstrap DatePicker 配置集 firstDayOfWeek

ngbBootstrap DatePicker Configuration Set firstDayOfWeek

ng-bootstrap

angular