Date Range Filter¶

Usage¶

The Date Range Filter provides options for both absolute and relative dates.

Users can select specific dates using either the calendar mode or the input mode.

It is possible to switch to an advanced mode to access relative date functions, which use offsets to specify dates in relation to a reference point (e.g., 7 days before or 1 month after now).

Additionally, it includes optional presets for quick access to common periods like "Last 7 days" or "Next month.

When to use¶

• For complex date filtering scenarios or in dashboards.
• When the use case requires flexibility in selecting periods relative to a reference date/time (e.g., "5 days before").
• When the use case involves advanced filtering capabilities, such as combining today or now with relative ranges.
• To offer users quick access to common preset ranges.
• Use a Date Picker if simpler date selections are required.

Best practices for Date Range Filter¶

• Use it in combination with Input Button.
• Use “Enter date” or the date format (i.e., MM/DD/YYYY) as placeholder.
• Configure presets according to the use case.
• If there are more than 10 presets, consider adding a search function.

Design¶

Date selection¶

For straightforward date selection, users can select absolute dates. This can be done in one of two modes:

• Calendar mode: Users select dates from a calendar interface, ideal for a visual approach.
• Input mode: Users manually enter dates and optionally use a calendar. Use this mode when both date and time need to be specified.

1. Presets (optional), 2. Calendar, 3. Advanced control , 4. Preview, 5. Apply button (optional), 6. Date picker controls

Advanced functions¶

Advanced function provides flexibility with relative dates. Users can select dates relative to a reference point (e.g., "5 days before today").

1. Reference date, 2. Anchor to today/now, 3. Range value, 4. Time scale, 5. Offset period

Code¶

The SiDateRangeFilter component supports selecting date/time ranges for filtering use cases that occur for example in dashboard applications. The component provides the date/time interval object DateRangeFilter by:

• Selecting two absolute dates.
• Selecting a date as a reference point and a range definition like 5 days before or 2 weeks after.
• Using today or now in combination with a range definition.

In addition, the component offers a configurable list of named preset range definitions.

Usage¶

import { SiDateRangeFilterComponent } from '@siemens/element-ng/date-range-filter';

@Component({
  imports: [SiDateRangeFilterComponent, ...]
})

Usage within popup¶

When using as a filter in a popup for a dashboard, use the button styled as an input, by using the btn-input CSS style.