在 Angular 中,可以使用第三方库 ng-bootstrap
来实现日期选择器。以下是一个示例代码,演示如何在 Angular 中使用 ng-bootstrap
的日期选择器:
首先,安装 ng-bootstrap
:
npm install --save @ng-bootstrap/ng-bootstrap
然后,在你的 Angular 组件中导入所需的模块和服务:
import { Component } from '@angular/core';
import { NgbDateStruct, NgbCalendar } from '@ng-bootstrap/ng-bootstrap';
接下来,在你的组件类中定义日期选择器的相关属性和方法:
@Component({
selector: 'app-date-picker',
templateUrl: './date-picker.component.html',
styleUrls: ['./date-picker.component.css']
})
export class DatePickerComponent {
model: NgbDateStruct;
date: {year: number, month: number};
constructor(private calendar: NgbCalendar) {}
selectToday() {
this.model = this.calendar.getToday();
}
}
在模板文件(date-picker.component.html
)中,使用 ngb-datepicker
指令来渲染日期选择器:
Date Picker
最后,在你的主模块(app.module.ts
)中导入 NgbModule
:
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
imports: [
// ...
NgbModule
],
// ...
})
export class AppModule { }
这样,你就可以在你的 Angular 应用中使用 ng-bootstrap
的日期选择器了。