在Angular中实现日期范围选择器的一种解决方法是使用第三方库。下面是一个使用ng2-daterangepicker
库的示例:
ng2-daterangepicker
库:npm install ng2-daterangepicker --save
Daterangepicker
模块:import { Daterangepicker } from 'ng2-daterangepicker';
@NgModule({
imports: [
Daterangepicker
],
declarations: [
YourComponent
]
})
export class YourModule { }
Daterangepicker
指令:
dateRangePickerOptions
和onDateRangeSelected
方法:import { DaterangepickerConfig } from 'ng2-daterangepicker';
export class YourComponent {
dateRangePickerOptions: any;
constructor(private daterangepickerOptions: DaterangepickerConfig) {
this.dateRangePickerOptions = {
startDate: '2019-01-01',
endDate: '2019-01-31',
format: 'YYYY-MM-DD',
autoApply: true
};
this.daterangepickerOptions.settings = {
locale: { format: 'YYYY-MM-DD' },
alwaysShowCalendars: false
};
}
onDateRangeSelected(dateRange: any) {
console.log('Selected date range: ', dateRange);
}
}
在上面的代码中,dateRangePickerOptions
定义了日期选择器的初始值和格式。onDateRangeSelected
方法会在选择日期范围后被调用,并打印选择的日期范围。
这样,你就可以在Angular中使用ng2-daterangepicker
库实现日期范围选择器了。请根据你的实际需求进行相应的调整。