---
name: DateTimePicker
description: Onesown Blazor Komponente DateTimePicker (Inputs). Verwende diesen Skill wenn du die DateTimePicker-Komponente verwenden, konfigurieren oder debuggen moechtest.
---

# DateTimePicker

**Namespace:** `Onesown.Blazor.Components`  
**Kategorie:** Inputs  
**Basisklasse:** `FormControlBase`  
**Generisch:** Ja (`DateTimePicker<TItem>` o.ae.)  

Datums-/Zeit-Eingabefeld mit eigenem Kalender-Popup – vollständig in Blazor implementiert, ohne externe Abhängigkeiten (kein Flatpickr, kein JavaScript). Unterstützt Datum, Uhrzeit und kombinierten Datum+Uhrzeit-Picker. Manuelle Eingabe mit automatischer Maskierung möglich.

**Live-Demo:** https://components.schini.com/demo/datetimepicker  

## Parameter

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``Typ`` | ``DateTimePickerTyp`` | ``DateTimePickerTyp.Datum`` | Art des Pickers. Mögliche Werte: Datum (Standard), Zeit (nur Uhrzeit), DatumUndZeit (Datum + Uhrzeit). |
| ``Value`` | ``TValue`` |  | Aktuell gebundener Wert (DateTime oder DateTime?). |
| ``ValueChanged`` | ``EventCallback<TValue>`` |  | EventCallback für Two-Way-Binding mit @bind-Value. Wird nach jeder Auswahl ausgelöst. |
| ``ValueExpression`` | ``Expression<Func<object>>`` |  | LINQ-Expression auf die gebundene Model-Property. Wird benötigt für DataAnnotations-Validierung und Label-Zuordnung. |
| ``MinDate`` | ``DateTime?`` |  | Minimales auswählbares Datum. Tage vor diesem Datum werden im Kalender deaktiviert. |
| ``MaxDate`` | ``DateTime?`` |  | Maximales auswählbares Datum. Tage nach diesem Datum werden im Kalender deaktiviert. |
| ``Readonly`` | ``bool`` |  | Setzt das Feld in den Nur-Lesen-Modus: Popup kann nicht geöffnet werden, Wert nicht änderbar. |
| ``ShowClearIcon`` | ``bool`` | ``true`` | Zeigt ein X-Symbol zum Zurücksetzen des Werts. Standard: true. |
| ``ShowPickerIcon`` | ``bool`` | ``true`` | Zeigt das Picker-Icon (Kalender oder Uhr) rechts im Feld. Standard: true. |
| ``PickerIconTemplate`` | ``RenderFragment`` |  | Benutzerdefiniertes Template für das Picker-Icon (ersetzt Standard-Icon). |
| ``ClearIconTemplate`` | ``RenderFragment`` |  | Benutzerdefiniertes Template für das Clear-Icon (ersetzt Standard-X). |
| ``CustomValidationMethod`` | ``Func<TValue, bool>`` |  | Optionale zusätzliche Validierungsfunktion. Gibt true zurück wenn der Wert gültig ist, false wenn nicht. |
| ``OpenOnFocus`` | ``bool`` | ``false`` | Popup automatisch öffnen sobald das Eingabefeld den Fokus erhält. Standard: false. |
| ``MinYear`` | ``int?`` |  | Frühestes Jahr im Jahres-Dropdown. Standardmäßig 100 Jahre vor heute. Wird automatisch aus MinDate abgeleitet wenn nicht gesetzt. |
| ``MaxYear`` | ``int?`` |  | Spätestes Jahr im Jahres-Dropdown. Standardmäßig 20 Jahre nach heute. Wird automatisch aus MaxDate abgeleitet wenn nicht gesetzt. |

## Geerbte Parameter (FormControlBase)

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``Size`` | ``string`` | ``OoSize.Md`` | Größe der Komponente. Mögliche Werte: OoSize.Xs, OoSize.Sm, OoSize.Md, OoSize.Lg, OoSize.Xl. Wird als CSS-Klasse am Root-Element gesetzt. |
| ``Id`` | ``string`` | ``Generator.GenerateRandomHtmlTagID()`` | Eindeutige HTML-ID des Input-Elements. Wird automatisch generiert und kann überschrieben werden (z. B. für Labels mit for-Attribut). |
| ``ShowLabel`` | ``bool`` | ``true`` | Blendet das Label über dem Eingabefeld ein oder aus. Standard: true. |
| ``IsFloatingLabel`` | ``bool`` | ``true`` | Aktiviert das schwebende Label (Floating Label), das beim Fokus oder bei Eingabe nach oben animiert. Standard: true. |
| ``Label`` | ``string`` |  | Beschriftung des Eingabefelds. Wird auch als Accessible-Name für Screenreader verwendet. |
| ``Placeholder`` | ``string`` | ``" "`` | Platzhaltertext im leeren Eingabefeld. Standard: Leerzeichen (verhindert Floating-Label-Sprung in Chrome). |
| ``AutoSaveCallback`` | ``EventCallback`` |  | Wird nach jeder Wertänderung ausgelöst und signalisiert der Seite, dass gespeichert werden soll. Kombinierbar mit TriggerAutoSaveCallbackOnlyIfValid. |
| ``TriggerAutoSaveCallbackOnlyIfValid`` | ``bool`` | ``true`` | Steuert ob AutoSaveCallback nur bei gültigem Wert ausgelöst wird. Standard: true. |
| ``AfterValueChanged`` | ``EventCallback`` |  | Wird nach jeder Wertänderung ausgelöst, unabhängig von der Gültigkeit des Werts. Geeignet für Live-Vorschau oder Seiteneffekte. |
| ``ShowValidationTooltip`` | ``bool`` | ``false`` | Zeigt Validierungsmeldungen als Tooltip neben dem Feld statt als Text darunter. Standard: false. |

## Hinweise

- Immer @bind-Value für Two-Way-Binding verwenden
- Für Formular-Validierung ValueExpression="() => _model.Property" setzen
- Komponente muss innerhalb eines &lt;Form&gt;- oder &lt;EditForm&gt;-Containers liegen, damit der EditContext greift
- AutoSaveCallback wird nach jeder gültigen Änderung ausgelöst, wenn TriggerAutoSaveCallbackOnlyIfValid=true (Standard)
- AfterValueChanged wird nach jeder Änderung ausgelöst, unabhängig von der Gültigkeit
- ShowValidationTooltip=true zeigt Validierungsmeldungen als Tooltip statt unter dem Feld
- TValue: DateTime oder DateTime? – nullable wird für optionale Felder empfohlen
- Typ="DateTimePickerTyp.Datum" (Standard): nur Datumsauswahl, Popup schließt nach Tag-Klick
- Typ="DateTimePickerTyp.Zeit": nur Uhrzeitauswahl mit ▲/▼ Stunden/Minuten
- Typ="DateTimePickerTyp.DatumUndZeit": Datum + Uhrzeit, Popup schließt nach OK
- MinDate / MaxDate: begrenzen den auswählbaren Bereich
- ShowClearIcon="true" (Standard): X-Icon zum Zurücksetzen des Werts
- ShowPickerIcon="true" (Standard): Kalender- bzw. Uhr-Icon rechts im Eingabefeld
- Readonly="true": Feld und Popup deaktiviert
- Manuelle Eingabe: maskiert, nur Ziffern erlaubt, Trennzeichen (. oder :) kommen automatisch