Datumswahl (Date Picker)
Datums-Eingabe mit Popover-Kalender (Monatsraster, Vor/Zurück, Heute markiert, Mo-So) — progressive: Textfeld TT.MM.JJJJ funktioniert ohne JS, emittet change
Nutzt: ui.icon
Beispiele
Feld fokussieren öffnet den Kalender (Heute umrandet, Auswahl gefüllt)
Liefertermin
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| label | string | "" | Label |
| value | string | "" | Vorbelegung (TT.MM.JJJJ) |
| placeholder | string | "TT.MM.JJJJ" | Platzhalter |
* Pflicht-Prop
Events & Slots
Events:
⚡ change — im Surface per on: {<event>: {action, params}} verdrahtbar.
Stellschrauben (Komponenten-Tokens)
Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.
| Token | Default |
|---|---|
--date-picker-action-on-primary | var(--color-action-on-primary) |
--date-picker-action-primary | var(--color-action-primary) |
--date-picker-border-default | var(--color-border-default) |
--date-picker-elevation-overlay | var(--elevation-overlay) |
--date-picker-form-background | var(--form-background) |
--date-picker-form-border | var(--form-border) |
--date-picker-form-border-focus | var(--form-border-focus) |
--date-picker-form-border-hover | var(--form-border-hover) |
--date-picker-form-placeholder | var(--form-placeholder) |
--date-picker-radius-control | var(--radius-control) |
--date-picker-surface-overlay | var(--color-surface-overlay) |
--date-picker-surface-sunken | var(--color-surface-sunken) |
--date-picker-text-default | var(--color-text-default) |
--date-picker-text-disabled | var(--color-text-disabled) |
--date-picker-text-muted | var(--color-text-muted) |
Genutzte Design-Tokens
border.hairlinecolor.action.on-primarycolor.action.primarycolor.border.defaultcolor.surface.overlaycolor.surface.sunkencolor.text.defaultcolor.text.disabledcolor.text.mutedelevation.overlayfont.family.defaultform.backgroundform.borderform.border-focusform.border-hoverform.placeholderlayer.dropdownradius.controlsize.1size.2size.3size.32size.8text.mdtext.smtext.xsweight.mediumweight.semibold
LLM-Notizen
component.date-picker
Datums-Eingabe mit Popover-Kalender (Mo–So, Monatsblättern, Heute umrandet). Format TT.MM.JJJJ.
Wann nutzen
- Formulare in App/Website/Desktop. Progressive: ohne JS bleibt ein valides Textfeld.
Wichtige Props
label,value(VorbelegungTT.MM.JJJJ),placeholder.
Beispiel-Node
{"definition": "component.date-picker", "props": {"label": "Liefertermin", "value": "15.08.2026"}, "on": {"change": {"action": "action.notify.show", "params": {"title": "Termin gesetzt"}}}}
Hinweise
- Emittiert
changemit{datum}nach Kalender-Klick oder valider Eingabe.