创建Angular9日历与ngx-bootstrap日期选择器示例和教程

正在生成Angular 9项目

打开新的命令行界面，并运行以下命令：

ng new angular-9-calendar-example

使用：导航到项目的文件夹：

cd angular-9-calendar-example

将Bootstrap添加到Angular 9

接下来，我们需要将Bootstrap和ngx bootstrap与Angular 9项目集成在一起。

首先，运行以下命令从npm安装Bootstrap 4：

npm install bootstrap --save

接下来，安装ngx-bootstrap软件包：

npm install ngx-bootstrap --save

导入和配置Datepicker组件

打开angular.json文件，并添加以下样式：

"styles": [
 "node_modules/bootstrap/dist/css/bootstrap.min.css",
 "node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
 "src/styles.css"
]

接下来，我们需要导入日期选择器组件，打开src/app/app.module.ts文件，并按如下方式更新它：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';

@NgModule({
 declarations: [
 AppComponent
 ],
 imports: [
 BrowserModule,
 BrowserAnimationsModule,
 BsDatepickerModule.forRoot()
 ],
 providers: [],
 bootstrap: [AppComponent]
})

export class AppModule { }

在Angular 9模板中添加日历UI

接下来，添加一个calendar组件，打开src/app/app.component.html文件，并添加以下HTML代码：

<div class="container">
 <div class="row">
 <div class="col-xs-12">
 <input type="text"
 placeholder="Choose date"
 class="form-control"
 bsDatepicker>
 </div>

 <div class="col-xs-12">
 <input
 type="text"
 placeholder="Choose date"
 class="form-control"
 bsDatepicker
 bsDaterangepicker
 [bsConfig]="{ isAnimated: true }">
 </div>
 </div>
</div>

保存文件，并在终端中运行以下命令：

ng serve