---
title: "Datetime Field"
slug: "datetime-field"
updated: 2026-02-25T17:27:03Z
published: 2026-02-25T17:27:03Z
canonical: "learn.servitly.com/datetime-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.

# Datetime Field

This field allows selecting a datetime for data filtering.

![Datetime Field](https://components-manager.servitly.com/components/DatetimeField_1/IMAGES/_screenshot?owner=AG_Servitly)

### Template Syntax

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

```xml

            <datetime-field name="from"
            label="From:"
            labelPosition="left|top"
            defaultValue="startToday">
            </datetime-field>
        
```

## Component Reference

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

#### Datetime Field `&lt;datetime-field&gt;`

| *Default Value* | The default value to preselect when entering the page. **Name**: defaultValue **Type**: ENUM \| Optional **Values**: *now*, *startToday*, *endToday*, *startYesterday*, *endYesterday*, *startCurrentWeek*, *endCurrentWeek*, *startLastWeek*, *endLastWeek*, *startCurrentMonth*, *endCurrentMonth*, *startLastMonth*, *endLastMonth*, *startCurrentYear*, *endCurrentYear*, *startLastYear*, *endLastYear*, *3HoursAgo*, *6HoursAgo*, *12HoursAgo*, *24HoursAgo*, *2DaysAgo*, *7DaysAgo*, *30DaysAgo* `defaultValue="now"` |
| --- | --- |
| *Label* | The field label. **Name**: label **Type**: STRING \| Optional `label="abc"` |
| *Label Position* | The position where the label must be displayed (left [default], top, none). **Name**: labelPosition **Type**: ENUM \| Optional **Values**: *left*, *top*, *none* `labelPosition="left"` |
| *Name* | The name of context variable holding the selected datetime. **Name**: name **Type**: STRING \| Optional `name="abc"` |
| **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

<datetime-field    
    name="abc"
    label="abc"
    labelPosition="left"
    defaultValue="now"
    class="my-custom-class"
    *ngIf="getUser().organizationId != null"></datetime-field>
```