在Angular Material中,可以使用DateRangePicker
组件来选择日期范围。要在日期范围改变时获取值,可以使用MatDateRangeInput
指令,结合valueChange
事件来监听值的变化。
以下是一个示例代码:
HTML模板:
选择日期范围
组件代码:
import { Component } from '@angular/core';
import { MatDateRangeInput } from '@angular/material/datepicker';
@Component({
selector: 'app-date-range-picker',
templateUrl: './date-range-picker.component.html',
styleUrls: ['./date-range-picker.component.css']
})
export class DateRangePickerComponent {
onDateRangeChange(event: { start: Date, end: Date }) {
console.log(event.start, event.end);
}
}
在上面的代码中,我们使用MatDateRangeInput
指令绑定输入框,并使用(dateChange)
事件监听日期范围的变化。在组件中定义onDateRangeChange
方法来处理日期范围的变化事件,这个方法会在日期范围改变时被调用,同时会传递一个包含开始日期和结束日期的对象。在onDateRangeChange
方法中,我们可以通过event.start
和event.end
来获取开始日期和结束日期的值。
请注意,上述示例中使用了MatDateRangePickerActions
组件来添加一个关闭按钮,以便在选择日期范围后关闭选择器。这只是一个可选的步骤,你可以根据需求自定义选择器的行为。
希望以上示例能解决你的问题!