`datefield`

This component represents a date field.

Configuration

For general configuration options, see General Component Configuration.

Specific Configuration

type ("datefield"): Component type.
value (Binding | date-string): Field value.

General Configuration

In addition to the configurations that apply to all fields, the following optional configurations can be set: //boxLabel settings, disabled, errorTarget, icon, label, label settings, onChange, readOnly, required.

Custom Styling

The visual design of the date fields is primarily controlled via global variables. CSS can be used selectively for specific customizations.

Using the cls , you can apply your own CSS rules. The component provides the following standard styling targets for this purpose:

.datefield: Styles for the date field container.
.datefield-label / .datefield .label: Direct access to the date field Label.
.datefield .value: Access to the date field’s input element.

Example

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"
      }
    }
  }
}

Embedded preview

Open preview in a separate window

Keywords: