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

時間 2019-11-13

標籤 angular 使用 ngx bootstrap datepicker 組件實現本地化國際化欄目 AngularJS 简体版

原文原文鏈接

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

step1. 安裝 ngx-bootstrap :html

npm install ngx-bootstrap --savenode

step2 .引入相關文件:npm

在angular.json中的styles中引入相關的css文件，根據須要引入相應得文件json

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

在module文件中引入組件ts文件bootstrap

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中api

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中ide

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