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

分享于 

3分钟阅读

Angular

  繁體

正在生成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


BOO  angular  引导  CAL  Bootstrap  教程  
相关文章