Date Field Element

Last Update: September 8, 2025

The Avada Date Field Element allows users to select a date when filling out a form, using either a calendar picker or manual entry. It helps standardize date input, reducing errors and ensuring consistent formatting across submissions. With options for setting minimum and maximum dates, default values, and display formats, it can be tailored to suit booking forms, event registrations, or any scenario where date selection is required.

Watch the video below for a visual overview of Avada Form Builder Elements, and view the Avada Date Field Element page. Read on to see the complete list of options.

For privacy reasons YouTube needs your permission to be loaded.

How To Use The Avada Date Field Element

The Avada Date Field Element allows you to place a formatted date using a date picker calendar option into your Avada forms. To start, add the element to your desired Column in a Form Layout.

Go through the options to populate and configure your date field. Add a label and a name, decide if it is to be a required field, add an optional placeholder and tooltip text, choose when to show the custom picker, and choose an icon. Read below for a description of all element options.

Element Options

Location: The edit screen within each Element. You access the Form Builder Elements when adding an Element while editing a Form in the Avada Form Builder (Forms > Form Builder, from the Avada Dashboard).

Note: Please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

General

HeadingDescription
Field LabelEnter the label for the input field. This is how users will identify individual fields.
Field NameEnter the field name. Please use only lowercase alphanumeric characters, dashes, and underscores.
Required FieldMake a selection to ensure that this field is completed before allowing the user to submit the form.
Empty Input NoticeEnter text validation notice that should display if data input is empty.
Placeholder TextThe placeholder text to display as hint for the input type. Note, this will only show for the custom picker. NOTE: The placeholder will only be displayed on screen sizes that have the custom picker enabled.
Tooltip TextThe text to display as tooltip hint for the input.
Custom PickerChoose to enable a lightweight custom picker on mobile only, mobile and desktop or set to never to use browser native.
Minimum DateSet the minimum date.
Maximum DateSet the maximum date.
Disabled DaysDisables the days of week you want to exlcude from selection.
Date FormatEnter the date format you need. You can check the complete list of available formatting tokens here.
Input Field IconSelect an icon for the input field, click again to deselect.
Autocomplete TokensSelect an autocomplete detail token. Select custom to add your own token combination. For more info and examples, you can check MDN Web Docs.
Autocomplete Custom TokensEnter your custom autocomplete tokens. For more info and examples, you can check MDN Web Docs.
Tab IndexTab index for the form field.
CSS ClassAdd a class for the form field.
CSS IDAdd an ID for the form field.

Conditionals

HeadingDescription
Conditional LogicAdd conditional logic for the input field.

In this article