Date Range Filter

Experimental feature since version 1.96. The API may change.

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