DatePicker | GistUI

Preview

Loading preview…

root = Form("booking", Grid(DatePicker("start", "Start date", required), DatePicker("stay", "Stay", range, presets), DatePicker("call", "Kickoff call", time), cols:3))

Signature

This is the line a model reads in the system prompt.

DatePicker(name, label, value:any, min:str, max:str, bind:$var, hint:str, error:str, size:Size, required, range, presets, time)

Group: Forms
Children: No
Positional arguments: name, label (a trailing ? means it may be left out)

Props

Prop	Type	How to write it	Notes
`name`	string	positional, required
`label`	string	positional, required
`value`	any	named: `value:…`	“2026-10-01”, or [start, end] with range
`min`	string	named: `min:…`
`max`	string	named: `max:…`
`bind`	`$state` variable	`bind:$name`	two-way binding to a $variable
`hint`	string	named: `hint:…`
`required`	flag	bare word: `required`
`error`	string	named: `error:…`
`size`	`sm` · `md` · `lg`	named: `size:…`	Also accepts `small`, `medium`, `large`.
`range`	flag	bare word: `range`	start and end dates
`presets`	flag	bare word: `presets`	quick ranges (last 7 days…)
`time`	flag	bare word: `time`	also pick a time

Use your own component

Keep the name and schema, swap what is drawn. The prompt and the model’s output do not change.

import { ui } from "@gistui/react/ui";

const lib = ui.extend({ DatePicker: MyDatePicker });
<GistUI library={lib} stream={response.body} />;

<GistUI :source="answer" :components="{ DatePicker: MyDatePicker }" />

<GistUI source={answer} components={{ DatePicker: MyDatePicker }} />

<GistUI source={answer()} components={{ DatePicker: MyDatePicker }} />

import { ui } from "@gistui/vanilla/ui";

const lib = ui.extend({ DatePicker: (ctx) => ({ el: myElement(ctx) }) });

See Custom components for the full contract. Style hook: [data-gistui="DatePicker"].