> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/dynamic-components/components/input-datetime.md).

# Input Datetime

The Avonni Date/Time Input component lets users select or enter a date and time value. It supports formatting options, timezone configuration, validation rules, and standard input states such as required, disabled, and read-only.

## Overview

Use the Date/Time Input whenever your experience page needs to collect a datetime value from users — for scheduling, filtering, or capturing timestamps. The component handles formatting and timezone display automatically once configured.

## Configuration

To configure the Date/Time Input, select it on the canvas. The configuration panel opens on the right. The sections below mirror the properties from top to bottom.

### Properties

#### Label

The text label displayed above the input field. Supports expressions mapped from a Salesforce field or a static string.

#### Value

The current datetime value pre-filled in the input. Accepts date, datetime, or a Salesforce field expression.

#### Field Level Help

Help text displayed in a tooltip next to the label, explaining the purpose of the field to users.

#### Variant

Controls how the label is rendered relative to the input field. Default: **Standard**.

| Variant           | Description                                              |
| ----------------- | -------------------------------------------------------- |
| **Standard**      | Label appears above the input.                           |
| **Label Hidden**  | Label is hidden visually but remains accessible.         |
| **Label Inline**  | Label appears to the left of the input on the same line. |
| **Label Stacked** | Label is stacked above the input in a compact style.     |

#### Max

The latest datetime value the user is allowed to select. Dates after this value will be rejected.

#### Min

The earliest datetime value the user is allowed to select. Dates before this value will be rejected.

#### Date Style

Controls how the date portion is formatted in the input. Default: **Medium**.

| Option     | Example                                    |
| ---------- | ------------------------------------------ |
| **Short**  | Abbreviated date format (e.g., 12/31/25)   |
| **Medium** | Standard date format (e.g., Dec 31, 2025)  |
| **Long**   | Full date format (e.g., December 31, 2025) |

#### Time Style

Controls how the time portion is formatted in the input. Default: **Medium**.

| Option     | Example                                     |
| ---------- | ------------------------------------------- |
| **Short**  | Hour and minute only (e.g., 3:00 PM)        |
| **Medium** | Hour, minute, and second (e.g., 3:00:00 PM) |
| **Long**   | Full time with timezone abbreviation        |

#### Timezone

A valid IANA timezone string (e.g., `America/New_York`, `Europe/Paris`) used to display and interpret the datetime value. If left blank, the user's browser timezone is used.

#### Required

When enabled, users must fill in this field before the form can be submitted. A required indicator is shown next to the label.

#### Message When Value Missing

The error message displayed when the field is required but the user submits without entering a value. Requires: **Required** to be enabled.

#### Disabled

When enabled, the input is grayed out and users cannot interact with it.

#### Read Only

When enabled, the input displays its value but cannot be edited by users. Available under Advanced Options.

#### Message When Bad Input

The error message displayed when a user enters an invalid datetime. Available under Advanced Options.

### Set Component Visibility

All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md).

## Interactions

[Interactions](/dynamic-components/component-builder/interactions.md) define what happens when users interact with the Date/Time Input. Configure them from the **Interactions** tab of the Edit Date/Time Input panel.

### Change

Fires when the user changes the datetime value in the input. Use this to store the updated value in a variable, update other components, or trigger a flow action.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/dynamic-components/components/input-datetime.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.