Datepicker

Überblick

mmm-date-picker ist ein formularfähiger Datepicker mit Overlay, Tastatursteuerung und Unterstützung für Einzel- oder Bereichsauswahl.

Varianten

• selectionMode="single": einzelnes Datum
• selectionMode="range": Start- und Enddatum

Subkomponenten

Die Komponente verwendet intern mmm-ng-input, mmm-overlay und mmm-icon, stellt nach außen aber nur mmm-date-picker als API bereit.

Inputs

Input	Typ	Beschreibung
label	string	Feldlabel
error	boolean	Fehlerstatus
errorMessage	string	Fehlermeldung unterhalb des Felds
supportingText	string	Zusätzlicher Hilfetext
selectionMode	`‘single'	'range’`

Outputs

Die Komponente arbeitet als ControlValueAccessor. Werte werden in der Regel über Angular Forms gebunden.

• single: YYYY-MM-DD
• range: { start: string | null, end: string | null }

SCSS-Variablen

Wichtige Variablen:

• --mmm-datepicker-panel-border-radius
• --mmm-datepicker-panel-padding
• --mmm-datepicker-panel-shadow
• --mmm-datepicker-header-gap
• --mmm-datepicker-header-button-padding
• --mmm-datepicker-header-button-border-radius
• --mmm-datepicker-nav-button-size
• --mmm-datepicker-day-size
• --mmm-datepicker-day-border-radius
• --mmm-datepicker-pick-grid-gap
• --mmm-datepicker-pick-height

Hinweise

• Die Komponente ist keyboard-navigierbar.
• Monat- und Jahresauswahl sind in den Picker integriert.
• Für Formulare ist formControl, ngModel oder ein anderer Angular-Forms-Mechanismus die bevorzugte Anbindung.

Beispiel

<mmm-date-picker
  label="Zeitraum"
  selectionMode="range"
  supportingText="Bitte einen gültigen Zeitraum wählen"
></mmm-date-picker>

kalender_24