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">
原文地址:https://www.cnblogs.com/web-wangmeng/p/9267721.html
时间: 2024-11-13 14:40:28