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.
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.
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.
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
Time Step (in Minutes)
The step increment, in minutes, between the selectable times in the time input. Default is 15; the minimum is 5.
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.
Interactions
Interactions 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.
Styling
Configure the Input Datetime's appearance from the Style tab of the Edit Input Datetime panel.
Controls the outer spacing around the component.
Top / Right / Bottom / Left: Adjust the space on each side.
Controls the inner spacing between the component's content and its border.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
Controls the component's dimensions.
Width / Height: Set fixed dimensions.
Min Width / Max Width / Min Height / Max Height: Constrain the size within bounds.
Overflow: Control how content that exceeds the bounds is handled.
Customizes the border surrounding the component.
Color / Size / Style / Radius: Set the border color, thickness, style, and corner rounding.
Styles the field label.
Text Color / Font Size / Font Style / Font Weight: Set the label color and typography.
Styles the input field.
Background Color / Text Color / Border Color / Border Radius: Set the input colors and corner rounding.
Spacing Horizontal Start / Spacing Horizontal End: Set the inner horizontal spacing.
Last updated
Was this helpful?