Datumswahl (Date Picker) — component.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
Componentv1.0.0Formulareweb.documentweb.applicationdesktop.shellbuilder.preview
Beispiele
Feld fokussieren öffnet den Kalender (Heute umrandet, Auswahl gefüllt)
Liefertermin
Eigenschaften
| Prop | Typ | Default |
|---|---|---|
label | string | "" |
value | string | "" |
placeholder | string | "TT.MM.JJJJ" |
Events & Slots
Events: change
Stellschrauben (Komponenten-Tokens)
| 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.hairline color.action.on-primary color.action.primary color.border.default color.surface.overlay color.surface.sunken color.text.default color.text.disabled color.text.muted elevation.overlay font.family.default form.background form.border form.border-focus form.border-hover form.placeholder layer.dropdown radius.control size.1 size.2 size.3 size.32 size.8 text.md text.sm text.xs weight.medium weight.semibold