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

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

datefield.json

{
  "$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}"
        }
      ]
    }
  ],
  "state": {
    "data": {
      "datefields": {
        "three": "2025-12-30T23:00:00.000Z"
      }
    }
  }
}

Eingebettete Vorschau

Vorschau in separatem Fenster öffnen

Keywords: