正在生成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
相关文章