1. 在你的Angular项目中安装ng-bootstrap库。

npm install --save @ng-bootstrap/ng-bootstrap

2. 导入所需的模块。打开你的app.module.ts文件并添加以下代码：

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgbModule // Add this import statement
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 创建日期选择器组件。打开你的组件文件并添加以下代码：

import { Component } from '@angular/core';
import { NgbDatepickerConfig, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-date-picker',
  templateUrl: './date-picker.component.html',
  styleUrls: ['./date-picker.component.scss']
})
export class DatePickerComponent {
  startDate: NgbDateStruct;
  endDate: NgbDateStruct;

  constructor(config: NgbDatepickerConfig) {
    // Customize default options
    config.minDate = { year: 1900, month: 1, day: 1 };
    config.maxDate = { year: 2099, month: 12, day: 31 };
    config.outsideDays = 'visible';
  }

  // Method to format date
  format(date: NgbDateStruct): string {
    if (!date) {
      return '';
    }
    return `${(date.month < 10 ? '0' : '')}${date.month}/${(date.day < 10 ? '0' : '')}${date.day}/${date.year}`;
  }
}

4. 编写HTML模板，显示日期选择器及所选范围。在你的HTML文件中添加以下代码：

  

    

      

        

          
Date Picker
          

            Start Date: