---
title: "Period Field V1"
slug: "period-field"
updated: 2026-02-25T17:39:30Z
published: 2026-02-25T17:39:30Z
canonical: "learn.servitly.com/period-field"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://learn.servitly.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Period Field V1

This field allows selecting a period for data filtering.

> [!WARNING]
> Deprecated Widget
> 
> This page control is deprecated and no longer maintained. Use the [Period Field V2](/docs/period-field-v2) component instead.

![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/image(531).png)

### Template Syntax

Below you can find some examples of how to use the component within a template.

```xml

        <period-field id="my-period" opensOption="right"></period-field>
    
```

## Component Reference

Here is a comprehensive list of all the elements and properties that can be used to configure the component.

#### Period Field V1 `&lt;period-field&gt;`

| *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* `defaultPeriodValue="TODAY"` |
| --- | --- |
| *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* `[periods]="['TODAY', 'YESTERDAY']"` |
| *End Variable* | The name of the context variable holding the selected period end date. **Name**: endVariable **Type**: STRING \| Optional `endVariable="endTime"` |
| *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* `id="abc"` |
| *Label* | The field label. **Name**: label **Type**: STRING \| Optional `label="Period"` |
| *~~Name~~* | The name used by other page widgets to retrieve the selected period, and update the data in case the period is changed. **Name**: name **Type**: STRING \| Optional > [!CAUTION] > DEPRECATED > > Use the Id property. `name="abc"` |
| *Popup Opening Option* | The position where the selection menu is opened (left, center, right [default]). **Name**: opensOption **Type**: ENUM \| Optional **Values**: *left*, *center*, *right* **Default Value**: *right* `opensOption="left"` |
| *Start Variable* | The name of the context variable holding the selected period start date. **Name**: startVariable **Type**: STRING \| Optional `startVariable="startTime"` |
| **Rendering** |
| *CSS Class* | The name(s) of the CSS class used to customize the widget layout. **Name**: class **Type**: STRING \| Optional `class="my-custom-class"` |
| *Visibility Condition* | The expression that allows you to reduce the visibility of the element. **Name**: *ngIf **Type**: STRING \| Optional `*ngIf="getUser().organizationId != null"` |

## Full Syntax Example

```xml

<period-field    
    id="abc"
    name="abc"
    label="Period"
    startVariable="startTime"
    endVariable="endTime"
    opensOption="left"
    defaultPeriodValue="TODAY"
    periods="['TODAY', 'YESTERDAY']"
    class="my-custom-class"
    *ngIf="getUser().organizationId != null"></period-field>
```