Angular时间范围
在 Angular 中，我们可以使用 ngx-daterangepicker-material 库来创建时间范围选择器。该库基于 daterangepicker jQuery 插件，为 Angular 应用程序提供了带有语言本地化支持和自定义选项的日期选择器组件。
以下是一个示例：
- 安装 ngx-daterangepicker-material 库：
npm install ngx-daterangepicker-material
- 在需要使用范围选择器的组件中导入依赖并添加以下代码：
import { Component } from '@angular/core'; import { DateRange } from 'ngx-daterangepicker-material';
@Component({
selector: 'app-date-range',
template: ,
})
export class DateRangeComponent {
public selected: DateRange;
public options: any = {
locale: { format: 'YYYY-MM-DD' },
alwaysShowCalendars: false,
showClearButton: true,
};
public dateRangeSelected(range: DateRange) { console.log(range); } }
在代码中，我们定义了一个名为 options 的配置对象，其中包含了日期格式、是否显示清除按钮等选项。将该对象传递给 ngxDaterangepickerMd 指令后，日期选择器即可根据指定的选项进行渲染。
当用户选择时间范围时，selected 属性会自动更新，同时会触发 dateRangeSelected 方法。我们可以通过在控制台输出选定的时间范围来验证它是否正确。
这样，我们就可以在 Angular 应用程序中使用范围选择器了。