angular使用ngx-bootstrap的datepicker組件並實現本地化/國際化

datepicker組件官方api： http://ngx-bootstrap.com/#/datepicker

 

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<BsDatepickerConfig>;
 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中

<input type="text"
      placeholder="請選擇生效日期"
      bsDatepicker
      formControlName="effectiveTime"
      placement="bottom"[minDate]="effectiveMinDate"
      [maxDate]="effectiveMaxDate"
      [bsConfig]="bsConfig">