在 Angular 中使用 Bootstrap Datepicker

在本节中，我们将学习如何使用 angular 添加 bootstrap datepicker。 为此，将创建一个 angular bootstrap datepicker 示例。 在 angular 应用程序中，我们将使用 bootstrap 4 datepicker。 我们将描述的以下 bootstrap datepicker 示例在 angular 中非常简单。

当我们使用 6、7、8、9、10 和 11 版本的 angular 应用程序时，可以轻松创建 bootstrap 4 datepicker。 在我们的示例中，我们将使用 ngx-bootstrap 作为 datepicker。

使用 Bootstrap，我们可以开发 Ng Bootstrap。 所有 bootstrap 3 和 bootstrap 4 原生 Angular 指令，例如按钮、datepicker、模型、分页等，都可以由 Ng bootstrap 提供。 使用 Ng Bootstrap，可以轻松使用 bootstrap UI。 为了添加它，我们将创建一个带有 datepicker 的输入字段，它稍后将在 angular 应用程序中使用。 为了更容易理解这一点，我们将逐步描述模型。 添加 bootstrap datepicker 的逐步过程如下

步骤 1

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

步骤 2

在此步骤中，我们将安装 Bootstrap 4。 在我们的示例中，我们需要 bootstrap CSS，这就是为什么我们将安装 bootstrap 的核心包。 要安装它，我们将使用以下命令

下载后，我们需要包含 bootstrap CSS，例如 "node_modules/bootstrap/dist/css/bootstrap.min.css"。 现在，我们将使用 angular.json 文件来添加它。

angular.json

步骤 3

在此步骤中，我们将安装 Ng Bootstrap。 在我们的示例中，我们需要 bootstrap UI，这就是为什么我们将安装 Ng Bootstrap 的包。 要安装它，我们将使用以下命令

步骤 4

在此步骤中，我们将导入模块。 我们将使用 app.module.ts 文件并在此文件中导入 NgbModule 和 FormsModule 模块，如下所示

src/app/app.module.ts

步骤 5

在此步骤中，我们将更新视图文件。 所以我们将更新我们的 html 文件。 现在，我们将为 datepicker 创建简单的 bootstrap 输入字段，如下面的代码所示

src/app/app.component.html

步骤 6

在此步骤中，我们将使用组件 ts 文件。 我们需要更新此文件。 为此，我们将编写 bootstrap datepicker 模型代码，如下所示

src/app/app.component.ts

现在，两个文件都已准备好运行。 因此，我们可以执行以下命令来运行它

运行上述命令后，输出如下