`timefield`

Diese Komponente stellt ein Zeitfeld dar.

Konfiguration

Für allgemeine Konfigurations-Optionen siehe Allgemeine Komponenten Konfiguration.

Spezifische Konfiguration

type ("timefield"): Typ der Komponente.
value (Binding | date-string): Wert des Feldes. Absolute Zeitangaben können in folgenden Formaten angegeben werden: HH:mm, HH:mm:ss, HH:mm a, HH:mm A, YYYY-MM-DDTHH:mm:ss.sssZ. Wie beim Datumsfeld werden beim submit Zeitangaben immer im Format YYYY-MM-DDTHH:mm:ss.sssZ angegeben, wenn ein Nutzer das Datum bearbeitet hat. Eine unbearbeitete Zeitangabe ändert das Format nicht und bleibt in dem angegebenen Format.

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 Zeitfelder 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:

.timefield: Styles für den Container des Zeitfelds.
.timefield-label / .timefield .label: Direkter Zugriff auf das Label des Zeitfelds.
.timefield .value: Zugriff auf das Eingabeelement des Zeitfelds.

Beispiel

timefield.json

{
  "$schema": "https://forms.virtimo.net/5.1.x-SNAPSHOT/schema.json",
  "metaData": {
    "id": "0",
    "version": 0
  },
  "configuration": {},
  "components": [
    {
      "type": "container",
      "label": "Timefield Component Example",
      "languageButton": true,
      "components": [
        {
          "type": "timefield",
          "value": "05:31 PM"
        },
        {
          "type": "timefield",
          "value": "07:42"
        },
        {
          "type": "timefield",
          "value": "${/data/timefields/three}"
        },
        {
          "type": "timefield",
          "label": "Start of hour",
          "value": "now/h"
        }
      ]
    }
  ],
  "state": {
    "data": {
      "timefields": {
        "three": "2025-12-30T23:14:12.000Z"
      }
    }
  }
}

Eingebettete Vorschau

Vorschau in separatem Fenster öffnen

Keywords: