Bootstrap Angular日期
Bootstrap Angular日期
在本节中，我们将学习使用Angular如何添加Bootstrap Datepicker。为此，将创建一个角度引导日期选择器示例。在有角度的应用程序中，我们将使用bootstrap 4 datepicker。下面将介绍的bootstrap datepicker示例在角度上非常简单。
当我们将角度应用程序与版本6、7、8、9、10和11一起使用时，bootstrap 4 datepicker可以是轻松创建。在我们的示例中，我们将使用ngx-bootstrap进行日期选择。
使用 Bootstrap ，我们可以开发Ng Bootstrap。 NgBootstrap 可以提供所有Bootstrap 3和Bootstrap 4的本机Angular指令，例如按钮，日期选择器，模型，分页等。使用Ng Bootstrap，可以轻松使用Bootstrap UI。要添加此内容，我们将使用datepicker创建一个输入字段，稍后将在angular应用程序中使用它。为了容易理解这一点，我们将逐步描述模型。添加Bootstrap 日期选择器的分步过程如下:
步骤1:
在此步骤中，我们将创建新应用程序。为了轻松创建我们的角度应用程序，我们将使用以下命令:
步骤2:
在此步骤中，我们将安装Bootstrap 4 。在我们的示例中，我们需要引导CSS，这就是为什么我们将安装引导核心包的原因。要安装它，我们将使用以下命令:
npm install bootstrap--save
下载后，我们需要包含引导CSS，例如" node_modules/bootstrap/dist/css/bootstrap.min.css"。现在，我们将使用angular.json文件添加它。
angular.json
.....
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
.....
步骤3:
在此步骤中，我们将安装Ng Bootstrap 。在我们的示例中，我们需要引导UI，这就是为什么我们将安装Ng Bootstrap软件包的原因。要安装它，我们将使用以下命令:
npm install--save @ng-bootstrap/ng-bootstrap
步骤4:
在此步骤中，我们将导入模块。我们将使用app.module.ts文件，并在此文件中导入NgbModule和FormsModule模块，如下所示:
src/app/app.module.ts
import { ModuleOf Browser } from '@angular/platform-browser';
import { ModuleOf Ng } from '@angular/core';
import { ComponentOfApp } from './app.component';
import { ModuleOfNgb } from '@ng-bootstrap/ng-bootstrap';
import { ModuleOfForms } from '@angular/forms';
@ModuleOfNg({
declarations: [
ComponentOfApp
],
imports: [
ModuleOfBrowser,
ModuleOfNgb,
ModuleOfForms
],
providers: [],
bootstrap: [ComponentOfApp]
})
export class AppModule { }
步骤5:
在此步骤中，我们将更新视图文件。因此，我们将更新我们的html文件。现在，我们将为日期选择器创建简单Bootstrap 的输入字段，该代码在以下代码中显示:
src/app/app.component.html
<h1> Example of Angular Bootstrap 4 Datepicker </h1>
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<input class="form-control" placeholder="yyyy-mm-dd"
name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
</div>
</div>
</div>
</form>
<hr/>
<pre>Model: {{ model | json }}</pre>
步骤6:
在此步骤中，我们将使用组件ts文件。我们需要更新此文件。为此，我们将编写引导日期选择器模型代码，如下所示:
src/app/app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'appBootstrap';
model;
constructor() {}
}
现在，两个文件都可以运行了。因此，我们可以执行以下命令来运行它:
