Collect a date or time from the visitor using the browser's native picker. The value is stored as a variable for formulas and results.
In the builder: Elements → Form Widgets → Datetime
Variable
| UI field |
Description |
| Name |
Variable name (required), e.g. start_date, appointment_time. |
| Value |
Default date/time when the form loads. |
Type
| Option |
Use for |
| datetime-local |
Date and time together |
| date |
Calendar date only |
| time |
Time of day |
| week |
Week selection |
| month |
Month selection |
Min Value / Max Value / Step
Limit the selectable range and step size (shown for date/number types).
Field Option
| UI field |
Description |
| Label |
Text above the picker. |
| Status |
See Status below. |
| Prefix |
Text or icon before the control. |
| Suffix |
Unit or label after the control. |
Status
| Value |
Behavior |
| Editable |
Visitor can type and change the value (default). |
| Readonly |
Value is visible and included in formulas, but the visitor cannot edit it. |
| Disabled |
Field is greyed out and inactive. The visitor cannot interact with it; use when the field should not apply in the current context. |
Validation
| UI field |
Options |
Purpose |
| Required |
Required / Optional |
Visitor must pick a value. |
Visibility
Expand Visibility to show or hide the widget based on an active View Mode or a formula. See Show and Hide Fields with Conditional Logic.
| UI field |
Description |
| Show |
Always or Conditionally |
| Active mode is |
Name of the View Mode that must be active for this widget to appear (when Show is Conditionally). |
| Formula result is positive |
Optional formula; evaluated on Calculate |
Design
Expand Design to style individual parts of the widget. Prefer project themes for a consistent look; per-widget styling is optional.
| Part |
What it represents |
| Label |
Text above the date/time control. |
| Control Area |
Region around the picker. |
| Date/Time Input |
The native browser date or time input. |
Custom CSS — useful selectors and classes:
| Selector / class |
Targets |
#cp-{ID} |
Entire widget (ID from the Element panel header). |
| Custom CSS Classes |
Classes you add in Design; applied to the outer widget container. |
input[name="{Name}"] |
Picker for a given Name. |
Datetime vs Text
|
Datetime |
Text |
| Input |
Browser date/time picker |
Free-form text |
| Best for |
Schedules, deadlines, birth dates |
Arbitrary text strings |
Use Datetime when you need a structured date or time. Use Text for values that are not dates.