This control widget allows selecting a period to be used by other page widgets for filtering data.
The left and right arrows allow the selected period to be moved forward and backward in time.
By clicking on the period (left button), a popup allows the user to change the period, which can be selected from predefined ones or specified manually through the calendar.
.png?sv=2022-11-02&spr=https&st=2025-04-01T23%3A36%3A38Z&se=2025-04-01T23%3A47%3A38Z&sr=c&sp=r&sig=ZeeN8j8jcMlHSLgrzGHTx%2FzpWdJVsbH0kd9X7tMSk9o%3D "image(529).png")
Optionally, by expanding the Specify Time accordion, the start and end time of the day can also be selected.
.png?sv=2022-11-02&spr=https&st=2025-04-01T23%3A36%3A38Z&se=2025-04-01T23%3A47%3A38Z&sr=c&sp=r&sig=ZeeN8j8jcMlHSLgrzGHTx%2FzpWdJVsbH0kd9X7tMSk9o%3D "image(530).png")
Template Syntax
Below you can find some examples of how to use the component within a template.
<period-field-v2 selectionMode="FLATTEN" maxDaysBack="30"></period-field-v2>
Component Reference
Here is a comprehensive list of all the elements and properties that can be used to configure the component.
Period Field V2 <period-field-v2>
Default Loading Period | The default date and time filtering period applied when entering the page. Name: defaultPeriodValue Type: ENUM | Optional Values: TODAY, YESTERDAY, LAST_1_HOUR, LAST_6_HOURS, LAST_12_HOURS, LAST_24_HOURS, LAST_7_DAYS, LAST_30_DAYS, THIS_MONTH, LAST_MONTH, LAST_6_MONTHS, LAST_12_MONTHS, THIS_WEEK, LAST_WEEK, LAST_FULL_7_DAYS, LAST_FULL_30_DAYS, LAST_FULL_12_MONTHS
|
Enabled Periods | The list of periods which can be selected from the embedded period filter. Name: periods Type: ENUM (multiple) | Optional Values: TODAY, YESTERDAY, LAST_1_HOUR, LAST_6_HOURS, LAST_12_HOURS, LAST_24_HOURS, LAST_7_DAYS, LAST_30_DAYS, THIS_MONTH, LAST_MONTH, LAST_6_MONTHS, LAST_12_MONTHS, THIS_WEEK, LAST_WEEK, LAST_FULL_7_DAYS, LAST_FULL_30_DAYS, LAST_FULL_12_MONTHS, CUSTOM
|
Id | The id used by other page widgets to retrieve the selected period, and update the data in case the period is changed. Name: id Type: STRING | Required Default Value: period
|
Label | The field label. Name: label Type: STRING | Optional
|
Advanced | |
Future Dates Selectable | Indicates whether the user can select dates in the future. Name: futureDatesSelectable Type: BOOLEAN | Optional Default Value: true
|
Max Days Back | The maximum number of past days limiting the period start date. Name: maxDaysBack Type: INTEGER | Optional
|
Period Selection Enabled | Indicates whether the period selection is enabled. Name: periodSelectionEnabled Type: BOOLEAN | Optional Default Value: true
|
Period Selection Style | The style used by the user to select the period. Name: periodSelectionStyle Type: ENUM | Optional Values: TOGGLE, SELECTION, FLATTEN Default Value: FLATTEN
|
Rendering | |
CSS Class | The name(s) of the CSS class used to customize the widget layout. Name: class Type: STRING | Optional
|
Visibility Condition | The expression that allows you to reduce the visibility of the element. Name: *ngIf Type: STRING | Optional
|