Date & Time Pickers

Note: Two kinds of date/time components:The Date Picker block is a standalone always-visible calendar used for filtering or display — no label, no validation, no submit flow.The Date, Time, and Date & Time form fields live inside a Form block and participate in validation, required checks, and the form's submit payload.

Date Picker Block (Standalone)

The Date Picker block puts a full calendar on the page, always visible (not a popover). It supports single-month, dual-month, and weekly layouts, header and footer slots, and an add-on system that decorates the calendar with data: event markers, disabled dates, per-day inline text, and min/max selection boundaries.

When to Use

• Show a calendar as a page element in its own right — a booking view, an availability display, a date filter.

• Decorate days with data: event markers, prices, blocked-out dates.

• For collecting a date as part of a form submission, use the Form Date field instead.

Content Properties

Add-ons

Appearance Properties

Events

Exposed State

Warning: Min/Max also limits the year dropdown. Setting Min Date or Max Date removes years outside the range from the calendar's year navigation control.

Note: The Date Picker has no callable methods. Change the selection by binding the initial date to a variable and updating the variable.

Date Field (inside a Form)

The Date field is a form field for collecting a calendar date (without time) as part of a form submission. It supports single date or date range, ISO or epoch format, customizable display format, and date selection limits.

Properties

Date Selection Limits Add-on

Warning: Date Selection Limits enforce at submit time too. Not just as a picker restriction — selecting an out-of-range date (e.g. via a bound default) also blocks form submission with a validation error.

Time Field (inside a Form)

The Time field collects a time of day — no date attached. Use it when the calendar day is fixed or irrelevant and only the clock time matters.

Properties

Note: Stored value is always 24-hour with seconds. The submitted value is always like 14:30:00 regardless of whether the picker shows 12-hour or 24-hour time. The value carries no date and no timezone.

Date & Time Field (inside a Form)

The Date & Time field captures an exact moment — a calendar date combined with a time of day. Use it for appointments, event start times, and deadlines where the time of day matters. Unlike the Date field, it has no range variant.

Properties

Choosing the Right Component

Frequently Asked Questions

What is the difference between the Date Picker block and the Date form field?

The standalone Date Picker block renders an always-visible calendar on the page and exposes its value immediately via {{ id.value }}. Use it for date-filtering widgets or dashboard controls. The Date form field is embedded inside a Form block, stores to {{ form.data }}, and participates in form submission, validation, and reset flows. Choose the block for real-time UI interactions; use the form field when date input is part of a data-entry form.

How is a time value stored — in 12-hour or 24-hour format?

Time values are always stored and returned as a 24-hour HH:mm:ss string regardless of how the picker displays the time to the user. When you reference {{ form.data.myTimeField }}, you'll always get a string like "14:30:00". The display format (12 vs 24-hour with AM/PM) can be configured separately for the visible picker.

Can I set minimum and maximum selectable dates on a Date Picker block?

Yes. Open the Add-ons panel for the Date Picker block and add the Date Selection Limits add-on. Set a Min Date and/or Max Date — these can be static values or dynamic expressions referencing other page state. Dates outside the range are rendered as disabled in the calendar and cannot be selected.

Why does my Date & Time field not support a range selection?

The Date & Time form field only supports single date-and-time selection, not ranges. If you need a date range with times, you would need two separate Date & Time fields (e.g., "Start date/time" and "End date/time"). Range selection is available on the plain Date form field and the standalone Date Picker block.

How do I control the step interval for time selection (e.g., 15-minute increments)?

The Time form field has a Time Step Size property (in minutes). Set it to 15 to show options at :00, :15, :30, :45. This affects the picker's option list, not free-form typing — users can still manually type any time value. The Date & Time field does not have a step size option.

Step-by-Step Examples

Availability Calendar with Blocked-Out Dates

1. Drop a Date Picker block on the page.

2. Set Value Type = Date Only.

3. Enable the Disabled Dates add-on and bind its Data Source to your bookings query (an array of ISO dates).

4. Enable Min Date = today so past days can't be picked.

5. On On Change, run your booking flow with {{ datePicker1.selectedDate }}.

Date Range Picker in a Form (Report Period)

1. Add a Date field inside your Form block.

2. In Date options, set Variant to Range.

3. Set Initial Start Date to the beginning of the current month and Initial End Date to today.

4. Make the field required: turn Is Optional off.

5. On form submit, access the values with {{ form1.data.reportPeriod.start }} and {{ form1.data.reportPeriod.end }}.

Appointment Slot Form

1. Add a Date & Time field inside your Form block.

2. Set Display Format to MMM dd, yyyy h:mma.

3. Set Placeholder to "Pick an appointment time".

4. Open Add-ons → Date Selection Limits and choose Only Future Dates.

5. Make required: turn Is Optional off.

Delivery Time Picker

1. Add a Time field inside your Form block.

2. Set Label to "Preferred delivery time".

3. In Time options, set Step size (in minutes) to 30 for half-hour slots.

4. Turn Is Optional off to make it required.

5. The submitted value will be in 24-hour format with seconds, e.g. 14:30:00.