DatePicker

DatePicker is a single date or date-time text input with format-aware masking.

Contract¶

Property	Type	Notes
`label`	`str`	Input label.
`value`	`str`	Current date value. Supports literal, store binding, and data-model binding.
`min_date`	`str`	Optional minimum accepted value.
`max_date`	`str`	Optional maximum accepted value.
`max_width`	`int \| None`	Optional width constraint.
`format`	`str`	Default `yyyy-MM-dd`. Also supports tokens used by the renderer, such as `HH` and `mm`.
`action` / `params`	`str` or action object / `dict`	Optional action emitted on change. Action objects can include `confirm`.

Value collected by actions: str.

Action Confirmation¶

Use an action object with confirm to require confirmation before the date change action is dispatched. If the user cancels the dialog, no backend action is sent and the input keeps its previous value.

The component test page exposes a date picker action counter and the last received payload so dispatch can be checked directly after confirming.

field = sdk.ui.DatePicker(
    "confirm_python_datepicker",
    label=sdk.i18n.t("components.datepicker.confirm.python_label"),
    value="2026-04-29",
    min_date="2026-01-01",
    max_date="2026-12-31",
)
field.set_prop(
    "action",
    {
        "name": "components.datepicker_confirm_action",
        "context": {"source": "python_datepicker"},
        "confirm": {
            "text": sdk.i18n.t("components.datepicker.confirm.prompt"),
            "confirm_text": sdk.i18n.t("components.datepicker.confirm.accept"),
            "cancel_text": sdk.i18n.t("components.datepicker.confirm.cancel"),
        },
    },
)

- kind: DatePicker
  id: confirm_yaml_datepicker
  label: "@t/components.datepicker.confirm.yaml_label"
  value: "2026-04-29"
  min_date: "2026-01-01"
  max_date: "2026-12-31"
  action:
    name: components.datepicker_confirm_action
    context:
      source: yaml_datepicker
    confirm:
      text: "@t/components.datepicker.confirm.prompt"
      confirm_text: "@t/components.datepicker.confirm.accept"
      cancel_text: "@t/components.datepicker.confirm.cancel"

Example¶

field = sdk.ui.DatePicker(
    "components_test_forms_datepicker_store",
    label="DatePicker",
    value=bound.store("/components_test/forms/datepicker/store", scope="page", default="2026-04-24"),
    min_date="2026-01-01",
    max_date="2026-12-31",
)

- kind: DatePicker
  id: components_test_forms_yaml_datepicker
  label: "DatePicker YAML"
  value: {type: store, scope: page, path: /components_test/forms/datepicker/store, default: "2026-04-24"}
  min_date: "2026-01-01"
  max_date: "2026-12-31"

Runtime¶

Use collect_input_ids to read the current formatted string. Use value.set, stateUpdate, or dataModelUpdate to change the value from an action.