在Angular中,我尝试使用日期过滤数据。我有两个mat-date-picker
元素,一个用于开始日期,另一个用于结束日期。我还有一个下拉列表,其中包含日期选择器的过滤器,例如-过去7天,过去24小时,上个月。当我选择其中一个选项时,它必须根据我选择的过滤器在mat-date-picker
中设置日期。
gmapcomponent.html
<div class="search-box-container">
<div class="row">
<form [formGroup]="angForm" (ngSubmit)="onSubmit()">
<div class="form-controls">
<mat-form-field>
<input matInput [matDatepicker]="start_date_picker" placeholder="Start date" formControlName="start_date">
<mat-datepicker-toggle matSuffix [for]="start_date_picker"></mat-datepicker-toggle>
<mat-datepicker #start_date_picker></mat-datepicker>
<mat-error *ngIf="submitted && formControl.start_date.errors">
<mat-error *ngIf="formControl.start_date.errors.required"> * select the start date</mat-error>
</mat-error>
</mat-form-field>
</div>
<h4>To</h4>
<div class="form-controls">
<mat-form-field>
<input matInput [matDatepicker]="end_date_picker" placeholder="End date" formControlName="end_date">
<mat-datepicker-toggle matSuffix [for]="end_date_picker"></mat-datepicker-toggle>
<mat-datepicker #end_date_picker></mat-datepicker>
<mat-error *ngIf="submitted && formControl.end_date.errors">
<mat-error *ngIf="formControl.end_date.errors.required"> * select the start date</mat-error>
</mat-error>
</mat-form-field>
</div>
<h4>Or</h4>
<div class="col">
<div class="drop-down">
<mat-form-field>
<mat-select [(value)]="selectedOption" (selectionChange)="onSelectChange($event.value)">
<mat-option [value]="'hours'">
<mat-radio-button>Last 24 hours</mat-radio-button>
</mat-option>
<mat-option [value]="'days'">
<mat-radio-button>Last 7 days</mat-radio-button>
</mat-option>
<mat-option [value]="'month'">
<mat-radio-button>Last month</mat-radio-button>
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
<button mat-flat-button color="primary">Search</button>
</form>
</div>
</div>
.ts
onSelectChange(value) {
console.log(value);
if ('days' === value) {
}
}