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

標籤：col   href   官方   import   name   his   targe   nod   ber   

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">

 

          

         

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