Date range filter (Angular)
This guide shows how to use two DatePicker components to filter DataGrid by date range.
1. Create new CRUD application from our Sample database, open Orders page and add Row component with three Column components with size 5, 5 and 2.
2. Add DatePicker components to first and second column and a Button component to third column.
3. Create start and end properties on page Load and bind DatePicker components Value property to start and end properties.
4. Open query builder for DataGrid component LoadData event invoke getOrders() method and create filter using start and end properties with following expression ${event.filter} and ${(<any>this).filter(this.start, this.end)}.
5. Open the client\src\app\orders\orders.component.ts file that Radzen has generated for your page to add the filter method. Radzen generates that file only once and will not overwrite it.
import { Component, Injector } from '@angular/core';
import { OrdersGenerated } from './orders-generated.component';
@Component({
selector: 'page-orders',
templateUrl: './orders.component.html'
})
export class OrdersComponent extends OrdersGenerated {
constructor(injector: Injector) {
super(injector);
}
filter(start, end) {
return `OrderDate ge ${this.getUTCString(start)} and OrderDate le ${this.getUTCString(end)}`;
}
getUTCString(date) {
return new Date(
Date.UTC(
date.getFullYear(),
date.getMonth(),
date.getDate(),
date.getHours(),
date.getMinutes(),
date.getSeconds(),
date.getMilliseconds()
)
).toISOString();
}
}
6. Execute this.grid0.load() on filter button Click event.
7. Run the application, change dates and press filter button.
