Generative UI Date and Time Controls#

Overview#

DatePicker is a first-class vocabulary control in @assistant-ui/react-generative-ui, registered alongside Select, Input, Checkbox, Slider, RadioGroup, and CheckboxGroup in the interactive vocabulary. DateTimeInput is an A2UI input type that is converted into the vocabulary rather than being a vocabulary node itself. Both participate in the same dual-mode binding/dispatch architecture that governs all interactive controls in the package.

DatePicker#

Source: DatePickerRender (render function) and vocabulary registration in packages/react-generative-ui/src/vocabulary/interactive.tsx.

Renders as a native <input type="date"> 1. Accepted props:

Binding vs. unbound behavior: When a binding is present (isBound = true), the control switches from defaultValue to a controlled value prop driven by answeredValue 2. On change, it calls updateBinding?.(value) and fires the $action event 3 — both always happen together.

DateTimeInput (A2UI mapping)#

DateTimeInput is an A2UI component type that is converted into the vocabulary, not a first-class vocabulary node itself. The mapping strategy added in PR #8566 4 is:

• Date-only values → rendered as DatePicker (the existing <input type="date">)
• Time-bearing / ISO-offset values → rendered as a text Input holding the ISO string

The text-input fallback was a deliberate choice: datetime-local and time HTML inputs strip timezone offsets, which would corrupt offset-bearing timestamps. 4

Binding and Dispatch Architecture#

All interactive controls share the same two-layer model:

1. Live Binding (useA2uiBinding)#

useA2uiBinding(name) 5 returns an updater function when the control is rendered under an A2uiBindingContext. Calling the updater writes the new value to the local model state at the matching JSON-pointer path in A2uiPresentRenderer 6. This makes the bound value available to other controls that read from the same path, but does not emit any upstream model-update operation.

2. Action Dispatch (fire)#

fire($action, $dispatch, value, element) in dispatch.ts:

• Is a no-op if either $action or $dispatch is absent.
• Resolves { "$field": name } references from the nearest Form/Card context.
• Merges the runtime value under $input.
• Calls the registered action handler via $dispatch.

actionAttr serializes the Action object for placement in data-aui-action 7.

When a standalone control dispatches vs. only updates a binding#

The rule is: both always happen, but each may be a no-op. On every change event, a control calls:

updateBinding?.(value) // no-op if no binding context
fire($action, $dispatch, value, element) // no-op if $action or $dispatch is missing

• A control inside a Form/Card typically has a name and no $action; it updates the binding on change and the Form's submit button fires the action with all field values collected.
• A standalone control typically has a $action; it fires the action immediately on change and optionally updates a binding if one is wired up.

This design means there is no special "standalone mode" code path — the same onChange handler covers both cases, and the presence or absence of $action/binding context determines observable behavior. 3 8

Key Source Files#