Date Range Filter
Date Range filter allows users to select a relative or an absolute time period.
The Date Range filter is implemented based on the sap.m.DynamicDateRange control and follows the date and time format of the latter.
Properties
Property | Type | Default Value | Required | Description | Schema Version | Since |
---|---|---|---|---|---|---|
value | DateRangeFilterValue | Yes | The value of the filter. | 1.37.0 | 1.96 | |
options | string[] | [ "date", "today", "dateRange", "from", "to", "lastDays", "nextDays", "lastWeeks", "nextWeeks" ] | No | The options that will appear in the dropdown. For all possible values see the Options table. | 1.37.0 | 1.96 |
placeholder | string | No | Defines a short hint intended to aid the user with data entry when the control has no value. | 1.73 | 1.136 |
DateRangeFilterValue Properties
Property | Type | Default Value | Required | Description | Schema Version | Since |
---|---|---|---|---|---|---|
option | string | Yes | The date range option. It should be one of the set options . |
1.37.0 | 1.96 | |
values | array | Yes | Values to initialize the option. Some use dates, while others require quantifier of type integer. When date is used, every valid parameter for JavaScript Date constructor like timestamp or date string can be used. For each option see the Options table. | 1.37.0 | 1.96 |
Options Properties
Option | Description | Required Values |
---|---|---|
date | Specific date | [Date] |
dateTime | Specific date and time | [Datetime] |
today | [] | |
yesterday | [] | |
tomorrow | [] | |
dateRange | Period between two dates | [Date, Date] |
dateTimeRange | Period between two dates and times | [Datetime, Datetime] |
from | [Date] | |
to | [Date] | |
fromDateTime | [Datetime] | |
toDateTime | [Datetime] | |
yearToDate | Range between the first day of the current year and today | [] |
lastDays | Last "X" days | [int] |
lastWeeks | Last "X" weeks | [int] |
lastMonths | Last "X" months | [int] |
lastQuarters | Last "X" quarters | [int] |
lastYears | Last "X" years | [int] |
nextDays | Next "X" days | [int] |
nextWeeks | Next "X" weeks | [int] |
nextMonths | Next "X" months | [int] |
nextQuarters | Next "X" quarters | [int] |
nextYears | Next "X" years | [int] |
todayFromTo | Today - "X" days / + "Y" days | [int, int] |
thisWeek | [] | |
lastWeek | [] | |
nextWeek | [] | |
specificMonth | Month from the start of the year. For example, "0" for January, "11" for December, "-1" for December the previous year, "12" for January of the following year, and so on. | [int] |
thisMonth | [] | |
lastMonth | [] | |
thisQuarter | [] | |
lastQuarter | [] | |
nextQuarter | [] | |
quarter1 | [] | |
quarter2 | [] | |
quarter3 | [] | |
quarter4 | [] | |
thisYear | [] | |
lastYear | [] | |
nextYear | [] |
Filters Model
The following values are available for filter of type "DateRange":
Path | Description |
---|---|
{filters>/keyOfTheFilter/value/option} | The current option. |
{filters>/keyOfTheFilter/value/values} | The current option values. |
{filters>/keyOfTheFilter/range/start} | The start date of the range in ISO 8601 format in UTC time zone. |
{filters>/keyOfTheFilter/range/end} | The end date of the range in ISO 8601 format in UTC time zone. |
{filters>/keyOfTheFilter/range/startLocalDate} | The start date of the range in short ISO 8601 date format in the local time zone. Use this property if you want to select a single date without reference to the time of the day. |
{filters>/keyOfTheFilter/range/endLocalDate} | The end date of the range in short ISO 8601 date format in the local time zone. |
{filters>/keyOfTheFilter/rangeOData/start} | The start date of the range in ISO 8601 format in UTC time zone. It is in the boundaries of Edm.DateTime type of the OData protocol. |
{filters>/keyOfTheFilter/rangeOData/end} | The end date of the range in ISO 8601 format in UTC time zone. It is in the boundaries of Edm.DateTime type of the OData protocol. |
{filters>/keyOfTheFilter/range/startLocalDate} | The start date of the range in short ISO 8601 date format in the local time zone. It is in the boundaries of Edm.DateTime type of the OData protocol. |
{filters>/keyOfTheFilter/range/endLocalDate} | The end date of the range in short ISO 8601 date format in the local time zone. It is in the boundaries of Edm.DateTime type of the OData protocol. |
Examples
A filter for product category is defined and later used inside a data request.
{ "sap.card": { "configuration": { "filters": { "activityPeriod": { "type": "DateRange", "value": { "option": "today", "values": [] } } } }, "data": { "request": { "request": { "url": "/activities", "parameters": { "startDate": "{filters>/activityPeriod/range/start}", "endDate": "{filters>/activityPeriod/range/end}" } } } }, "type": "Timeline", "header": { "title": "My Activities" }, "content": { ... } } }Try it Out