Adding Pre-defined Date Ranges
Description
Pre-defined date ranges can be added to a date control in the Search Part of the Grid Component.
Discussion
When you define the Search Part for a Grid, you can specify that any of the search fields are 'range' searches. If you turn on the range search feature, the Search Part will display two search fields for the start date and the end data.
You can now also display an optional pick list to select common date ranges, as shown in the image below. If you select one of the pre-defined date ranges, the dates in the From and To input controls will be filled in.
To turn on the pre-defined data range feature, check the Pre-defined date range selector property.
You can then click the smart field for the Pre-defined date range selector settings control to configure the selector.
The settings dialog allows you to set:
- width of the control
- label to show above the control
- in-line style for the control
- class name for the control
- list of pre-defined date ranges shown in the control.
By default a standard set of pre-defined date ranges are shown. These are:
- Today
- Yesterday
- This Week
- This Week-to-date
- This Month
- This Month-to-date
- Last Week
- Last Month
- Next Month
- This Year
- This Year-to-date
- This Quarter
- This Quarter-to-date
- Last Quarter
- Next Quarter
If you want to translate these names into different languages you can customize the list of choices and add language or text dictionary tags to each label.
You can augment this list with your own data ranges, or you can replace the built-in list with your own date ranges.
To define your own entry to appear in the list of choices, add a choices to the choice list that is defined as follows:
display name in the selector|value|javascript
where value is a unique name for the selection. The value must not contain any special characters or spaces. Javascript is some code that returns an object with two properties: startDate and endDate.
For example:
