Angular 8中如何设置ngx-bootstrap日期选择器周起始日为周一

你当前模板已经预留了[bsConfig]="datePickerConfig"的配置入口，直接基于这个入口修改即可，不需要改动第三方组件源码。

单组件局部配置（匹配你现有代码结构） #

在对应组件的TS类中定义datePickerConfig对象，通过weekStart参数控制每周起始日：
参数取值规则：按星期索引计数，周日=0、周一=1、周二=2……周六=6，设置为1即代表每周从周一开始计算。

// 组件类内部代码
datePickerConfig = {
  weekStart: 1, // 核心配置：每周以周一为起始
  // 你原有的其他日期选择器配置（如日期格式、可选日期范围）可以直接追加在此处，无冲突
};

踩坑提醒：

• 不要在模板中写内联配置对象（例如[bsConfig]="{weekStart:1}"），这种写法会在每次变更检测时生成新的对象引用，导致日期选择器反复重置弹出层，严重影响交互体验。将配置定义在TS类中是最优写法。
• 取值不要错位，若设置weekStart: 0会退回默认的周日为起始日的效果。

全局统一配置（适合全项目所有日期选择器统一规则的场景） #

如果不想为每个组件单独写配置，可以在根模块注册全局默认配置，所有未单独覆盖配置的日期选择器都会自动应用周一起始的规则：
在app.module.ts中新增对应provider配置：

import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';

@NgModule({
  providers: [
    {
      provide: BsDatepickerConfig,
      useFactory: () => {
        const globalConfig = new BsDatepickerConfig();
        globalConfig.weekStart = 1; // 全局默认以周一为每周起始日
        return globalConfig;
      }
    }
  ]
})
export class AppModule {}

现有模板冗余优化 #

你当前的input标签重复定义了两次style属性：

<!-- 原代码冗余部分 -->
<input
    bsDatepicker
    type="text"
    class="date"
    ngModel
    [bsConfig]="datePickerConfig"
    style="padding-left: 30px"
    (ngModelChange)="date($event)"
    [value]="newDate"
    style="width: 140px; padding-left: 38px"
/>

Angular解析时会以最后一个style属性的内容为准，前面的padding-left: 30px完全无效，建议合并为单个style属性，消除冗余。

内容的提问来源于stack exchange，提问作者Niraj Thike