datefield
Diese Komponente stellt ein Datumsfeld dar.
Konfiguration
Für allgemeine Konfigurations-Optionen siehe Allgemeine Komponenten Konfiguration.
Spezifische Konfiguration
type("datefield")-
Typ der Komponente.
value(Binding |date-string)-
Wert des Feldes.
minValue(Binding |date-string)-
Frühstes gültiges Datum.
maxValue(Binding |date-string)-
Spätestes gültiges Datum.
Date-String
Ein date-string ist ein string für ein Datum in einem bestimmten Format.
Unterstützt werden absolute Datumsangaben in folgenden Formaten: DD.MM.YYYY, YYYY-MM-DD, MM/DD/YYYY, YYYY-MM-DDTHH:mm:ss.sssZ.
Bei einem submit werden Datumsangaben immer im Format YYYY-MM-DDTHH:mm:ss.sssZ angegeben, wenn ein Nutzer das Datum bearbeitet hat.
Ein unbearbeitetes Datum ändert das Format nicht und bleibt in dem angegebenen Format.
Ein date-string kann auch eine relative Datumsangabe basierend auf der aktuellen Uhrzeit (bzw. dem Ausführungszeitpunkt now) sein.
Die Syntax orientiert sich an Opensearch Date Math.
Es werden folgende Operatoren und Einheiten unterstützt:
| Operator | Beschreibung | Beispiel |
|---|---|---|
|
Addiert Einheiten zum aktuellen Wert |
|
|
Subtrahiert Einheiten vom aktuellen Wert |
|
|
Rundet ab auf den Anfang der jeweiligen Einheit |
|
| Kürzel | Einheit |
|---|---|
|
Jahre |
|
Monate |
|
Wochen (Start ist Montag) |
|
Tage |
|
Stunden |
|
Minuten |
|
Sekunden |
Allgemeine Konfiguration
Neben den für alle gültigen Konfigurationen, können optional folgende Konfigurationen gesetzt werden: disabled, errorTarget, icon, label, label Einstellungen, onChange, readOnly, required.
Individuelles Styling
Das visuelle Design der Datumsfelder wird primär über die globalen Variablen gesteuert. Für spezifische Abweichungen kann gezielt CSS eingesetzt werden.
Über das Attribut cls können eigene CSS-Regeln angewendet werden.
Die Komponente bietet dafür folgende Standard-Angriffspunkte:
.datefield-
Styles für den Container des Datumfelds.
.datefield-label/.datefield .label-
Direkter Zugriff auf das Label des Datumfelds.
.datefield .value-
Zugriff auf das Eingabeelement des Datumfelds.
Beispiel
{
"$schema": "https://forms.virtimo.net/5.0.x/schema.json",
"metaData": {
"id": "0",
"version": 0
},
"configuration": {},
"components": [
{
"type": "container",
"label": "Datefield Component Example",
"languageButton": true,
"components": [
{
"type": "datefield",
"value": "12/31/2025"
},
{
"type": "datefield",
"value": "31.12.2025"
},
{
"type": "datefield",
"value": "${/data/datefields/three}"
},
{
"type": "datefield",
"label": "Between start of week and end of week",
"value": "now",
"minValue": "now/w",
"maxValue": "now/w+1w-1s"
}
]
}
],
"state": {
"data": {
"datefields": {
"three": "2025-12-30T23:00:00.000Z"
}
}
}
}