标签：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组件并实现本地化/国际化
标签：col href 官方 import name his targe nod ber
原文地址：https://www.cnblogs.com/web-wangmeng/p/9267721.html
