如何不修改Node Modules修改ngx-bootstrap日期选择器的Invalid Date提示

当然可以通过[bsConfig]配置来修改这个提示，完全不需要改动node_modules目录里的文件，下面分两种场景给你具体实现方法：

单个日期选择器自定义 #

1. 在组件模板中，给日期选择器绑定bsConfig属性：

<input type="text"
       bsDatepicker
       [bsConfig]="customDatePickerConfig"
       [(ngModel)]="selectedDate">

2. 在组件的TypeScript代码中，定义配置对象并指定invalidDate的自定义文本：

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  selectedDate: Date | undefined;
  // 自定义日期选择器配置
  customDatePickerConfig = {
    invalidDate: '无效日期' // 替换成你需要的提示文本
  };
}

全局所有日期选择器统一自定义 #

如果你希望项目中所有的ngx-bootstrap日期选择器都使用这个自定义提示，可以在根模块（比如AppModule）中做全局配置：

import { NgModule } from '@angular/core';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';

@NgModule({
  imports: [
    // 全局配置日期选择器参数
    BsDatepickerModule.forRoot({
      invalidDate: '无效日期'
    })
  ]
})
export class AppModule { }

这样配置后，无论是单个组件还是全局的日期选择器，当输入无效日期时，都会显示你自定义的提示文本，完全绕过了修改node_modules里默认配置的麻烦。

内容的提问来源于stack exchange，提问作者Guilherme Sester