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:

在此步骤中，我们将创建新应用程序。为了轻松创建我们的角度应用程序，我们将使用以下命令:

ng new my-new-app

步骤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() {}
 
}

现在，两个文件都可以运行了。因此，我们可以执行以下命令来运行它:

ng serve

Bootstarp Close图标

Bootstrap Borders