angural使用bootstrap时间选择器

Angular 使用 Bootstrap 时间选择器通常涉及到使用 Angular 的模块化体系和 Bootstrap 的插件库。`ng-bootstrap-timepicker`是一个流行的选择，它结合了Angular和Bootstrap样式的时间选择组件。以下是简单的步骤：

1. **安装**：首先，在你的Angular项目中安装 `ng-bootstrap-timepicker`，可以使用npm或yarn命令：

   npm install ng-bootstrap ng-bootstrap-timepicker
   # 或者
   yarn add ng-bootstrap ng-bootstrap-timepicker

2. **引入模块**：在你的 `app.module.ts` 中导入并启用 `NgbdTimepickerModule`：

   import { NgbdTimepickerModule } from 'ng-bootstrap-timepicker';

   @NgModule({
     imports: [NgbdTimepickerModule.forRoot()],
     // ...其他配置
   })
   export class AppModule {}

3. **添加组件**：在HTML模板中使用 `<timepicker>` 元素，并绑定到Angular模型上：

   <input [(ngModel)]="selectedTime" bs-timepicker>

这里的 `selectedTime` 是你希望绑定到的时间变量。

4. **样式调整**：确保已经包含了Bootstrap CSS 和 SCSS 文件，以便正确显示时间选择器的外观。

5. **使用示例**：

   <button (click)="openTimePicker()">选择时间</button>
   <pre>{{ selectedTime }}</pre>

在组件中打开时间选择器并更新绑定值：

   import { Component } from '@angular/core';

   @Component({
     selector: 'app-root',
     template: `
       <!-- 上述HTML内容 -->
     `,
   })
   export class AppComponent {
     selectedTime = "10:00 AM";

     openTimePicker() {
        this.selectedTime = new Date();
      }
   }