Date Field Element
The Date Field Element lets visitors pick a date in a form, for example a preferred appointment, a delivery date or a date of birth. It is added inside a Tirenoa Form (Tirenoa > Forms), and the chosen date reaches the form entries and the notification email.
Visitors can choose the date from a lightweight calendar picker or from the browser’s own date control. With the custom picker you can limit the range of dates, block certain days of the week and decide in which format the date is written into the form entries and the notification email.
In this article: How To Use · Element Options · Tips · Related Elements
How To Use The Date Field Element
Add the Date Field Element to your form and enter the Field Label and the Field Name (lowercase letters, numbers, dashes and underscores only). Set Required Field to Yes if a date must be chosen, and enter an Empty Input Notice to replace the browser’s default message when it is missing.
Next choose the Custom Picker: Always uses the calendar picker on every device, Desktop Only uses it on computers and the browser control on phones, and Never always uses the browser control. With the custom picker you can set a Minimum Date and Maximum Date, exclude weekdays with Disabled Days and set the Date Format. The calendar starts the week on the day set under Settings > General in WordPress.
The Placeholder Text is only visible where the custom picker is active, and Input Field Icon shows an icon inside the field. The chosen date is saved under the field label in the entries and the notification email, written in the Date Format you set (year-month-day when it is empty); with the browser control it is always year-month-day.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
General
| Heading | Description |
|---|---|
| Field Label | Enter the label for the input field. This is how users will identify individual fields. |
| Field Name | Enter the field name. Please use only lowercase alphanumeric characters, dashes, and underscores. |
| Required Field | Make a selection to ensure that this field is completed before allowing the user to submit the form. |
| Empty Input Notice | Enter text validation notice that should display if data input is empty. |
| Placeholder Text | The 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 Text | The text to display as tooltip hint for the input. |
| Custom Picker | Choose to enable a lightweight custom picker either on desktop only or on all devices. Set to “never” to use the browser native picker. |
| Minimum Date | Set the minimum date. |
| Maximum Date | Set the maximum date. |
| Disabled Days | Disables the days of week you want to exclude from selection. |
| Date Format | Enter the date format you need. You can check the complete list of available formatting tokens here. |
| Input Field Icon | Select an icon for the input field, click again to deselect. |
| Autocomplete Tokens | Select 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 Tokens | Enter your custom autocomplete tokens. For more info and examples, you can check MDN Web Docs. |
| Tab Index | Tab index for the form field. |
| CSS Class | Add a class for the form field. |
| CSS ID | Add an ID for the form field. |
Conditionals
| Heading | Description |
|---|---|
| Conditional Logic | Add conditional logic for the input field. |
Tips
- Minimum Date, Maximum Date, Disabled Days and Date Format are hidden when Custom Picker is set to Never, because the browser control does not support them.
- Minimum and maximum dates accept dynamic data, so you can for example keep past dates out of an appointment form without editing the form every day.
- Visitors can also type the date by hand in the custom picker. Use a clear format such as
d.m.YorY-m-dand mention it in the placeholder. - On phones the browser control is used with Desktop Only, so date limits and disabled days do not apply there. Choose Always when those limits matter.
- Leave Autocomplete Tokens off for booking dates. Use Birthday only for a real date of birth field.