The Date Range Picker is a type of client filter in a visualization that provides a calendar-based method of selecting a date range. It is more compact than the date range slider option and allows fine-grained control over the start and end date.
Adding a Date Range Picker
To add a date range picker, perform the following steps:
- Log in to edgeCore as an administrator.
- Open a page in the Edit mode.
- In the visualization header, click the three dots and select Edit Filters.
- A pop-up is displayed.
- In the pop-up, click + to add a new filter.
A new page for selecting filters is displayed.
- Select Date Range Picker and click Use Selected.
The selected filter is displayed in the pop-up.
- In Placement, specify where the filter is going to be displayed: Bottom Left, Bottom Right, Top Left, or Top Right.
- In Attribute to Filter, select the attribute that contains date values. This attribute will provide values for the filter and will also be used to determine the MIN and MAX values for a dynamic range.
- Enable or disable the Show Time toggle switch to specify whether the input control shows time.
When the toggle is enabled, the time value is concatenated with the date value. This doubles the width of the individual date inputs, increasing the width of the overall control. When the toggle is disabled, the time value is hidden, and the only date is shown. This makes the input much more compact.
- Click Save.
The filter is displayed in the visualization.
Example Date Range Picker (Without Time)
The Date Range Picker input is comprised of two dates. Clicking on one of the dates opens up a calendar picker control.
Example Date Range Picker (With Time)
Example Using Min/Max Date Options
Example of an Expanded Calendar Input
Example of an Expanded Calendar Input With “Max Date” Option Selected
The “Min Date” and “Max Date” provide a way to dynamically calculate parts of the date range.
- Toggling the “Max Date” option binds the Client Filter to the Maximum value available in the dataset at that time.
- Toggling the “Min Date” option binds the Client Filter to the Minimum value available in the dataset at that time.