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.
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.