datepicker组件官方api： 

 

step1. 安装 ngx-bootstrap  :

             npm install  ngx-bootstrap --save

step2 .引入相关文件:

          在angular.json中的styles中引入相关的css文件，根据需要引入相应得文件

"styles": [              "node_modules/ngx-bootstrap/datepicker/bs-datepicker.scss"            ],

在module文件中引入组件ts文件

import {BsDatepickerModule} from 'ngx-bootstrap/datepicker';import {defineLocale} from 'ngx-bootstrap/chronos';import {zhCnLocale} from 'ngx-bootstrap/locale';defineLocale('zh-cn', zhCnLocale);// 日历显示中文@NgModule({  imports: [      ...    BsDatepickerModule.forRoot()  ],  declarations: [...],  providers: [...]})

 

 组件component中

import {BsLocaleService,BsDatepickerConfig} from 'ngx-bootstrap/datepicker';export class InsuranceBuyComponent implements OnInit { bsConfig: Partial
     
      ; locale = 'zh-cn';  constructor(private fb: FormBuilder,              private localeService: BsLocaleService) {  } ngOnInit() {
    //日期配置  this.bsConfig = Object.assign({}, {dateInputFormat: 'YYYY-MM-DD', showWeekNumbers: false}); //日期使用中文 this.localeService.use(this.locale);}}
     

 

在html中