Date and Time Picker

JSON Forms supports JSON Schema's "date", "time" and "date-time" formats. Additional options to customize the "date", "time" and "date-time" pickers are offered for the React Material renderer set.

Time Picker

The time picker will be used when format: "time" is specified for a string property in the JSON Schema. Alternatively format: "time" can also be specified via the UI Schema options.

Schema Based

A control will be rendered as a time picker when the format of the corresponding string property is set to "time" in the JSON Schema.

Demo

Schema

schema.json

{
  "properties": {
    "time": {
      "type": "string",
      "format": "time",
      "description": "schema-based time picker"
    }
  }
}

UI Schema

uischema.json

{
  "type": "Control",
  "scope": "#/properties/time"
}

Data

{
  "time": "13:37:00"
}

UI Schema Based

A string control will also be rendered as a time picker by setting the property "format" to "time" in the UI Schema options.

Demo

Schema

schema.json

{
  "properties": {
    "time": {
      "type": "string"
    }
  }
}

UI Schema

uischema.json

{
  "type": "Control",
  "scope": "#/properties/time",
  "options": {
    "format": "time"
  }
}

Data

{
  "time": "13:37:00"
}

Options

The React Material renderer set offers additional UI Schema options to customize the appearance of the time picker text input as well as the picker itself. Please also refer to the localization section of this page to get information on how to customize the locales.

Time Picker Options

Option	Description
timeFormat	The time format used for the text input, can be different from the save format
timeSaveFormat	The format in which the time is saved in the data. Note that if you specify a format which is incompatible with JSON Schema's "time" format then you should use the UI Schema based invocation, otherwise the control will be marked with an error.
ampm	If set to true, the time picker modal is presented in 12-hour format, otherwise the 24-hour format is used
clearLabel	Label of the "clear" action in the time picker modal
cancelLabel	Label of the "cancel" action in the time picker modal
okLabel	Label of the "confirm" action in the time picker modal

The following example showcases some of the options. The text input is configured to only show the full hours while both hours and minutes are saved into the data. The picker presents itself in am/pm format.

Demo

Schema

schema.json

{
  "properties": {
    "time": {
      "type": "string"
    }
  }
}

UI Schema

uischema.json

{
  "type": "Control",
  "scope": "#/properties/time",
  "options": {
    "format": "time",
    "ampm": true,
    "timeFormat": "HH",
    "timeSaveFormat": "HH:mm",
    "clearLabel": "Clear it!",
    "cancelLabel": "Abort",
    "okLabel": "Do it"
  }
}

Data

{
  "time": "13:00:00"
}

Date Picker

The date picker will be used when format: "date" is specified for a string property in the JSON Schema. Alternatively format: "date" can also be specified via the UI Schema options.

Schema Based

A control will be rendered as a date picker when the format of the corresponding string property is set to "date" in the JSON Schema.

Demo

Schema

schema.json

{
  "properties": {
    "date": {
      "type": "string",
      "format": "date",
      "description": "schema-based date picker"
    }
  }
}

UI Schema

uischema.json

{
  "type": "Control",
  "scope": "#/properties/date"
}

Data

{
  "date": "2022-10-04"
}

UI Schema Based

A string control will also be rendered as a date picker by setting the property "format" to "date" in the UI Schema options.

Demo

Schema

schema.json

{
  "properties": {
    "date": {
      "type": "string"
    }
  }
}

UI Schema

uischema.json

{
  "type": "Control",
  "scope": "#/properties/date",
  "options": {
    "format": "date"
  }
}

Data

{
  "date": "2022-10-04"
}

Options

The React Material renderer set offers additional UI Schema options to customize the appearance of the date picker text input as well as the picker itself. Please also refer to the localization section of this page to get information on how to customize the locales.

Date Picker Options

Option	Description
dateFormat	The date format used for the text input, can be different from the save format
dateSaveFormat	The format in which the date is saved in the data. Note that if you specify a format which is incompatible with JSON Schema's "date" format then you should use the UI Schema based invocation, otherwise the control will be marked with an error.
views	Array defining which views are displayed. Options: year, month, date
clearLabel	Label of the "clear" action in the time picker modal
cancelLabel	Label of the "cancel" action in the time picker modal
okLabel	Label of the "confirm" action in the time picker modal

The following example showcases some of the options. Only Year and month are selected as views, this means the user is only able to pick a year and a month, but not the day. We are also only saving the year and month to the data as we configured it in the dateFormat options.

Demo

Schema

schema.json

{
  "properties": {
    "date": {
      "type": "string",
      "description": "does not allow to select days"
    }
  }
}

UI Schema

uischema.json

{
  "type": "Control",
  "scope": "#/properties/date",
  "label": "Year Month Picker",
  "options": {
    "format": "date",
    "clearLabel": "Clear it!",
    "cancelLabel": "Abort",
    "okLabel": "Do it",
    "views": [
      "year",
      "month"
    ],
    "dateFormat": "YYYY.MM",
    "dateSaveFormat": "YYYY-MM"
  }
}

Data

{
  "date": "2022-10-04"
}

Date-Time Picker

The date-time picker will be used when format: "date-time" is specified for a string property in the JSON Schema. Alternatively format: "date-time" can also be specified via the UI Schema options.

Schema Based

A control will be rendered as a date-time picker when the format of the corresponding string property is set to "date-time" in the JSON Schema.

Demo

Schema

schema.json

{
  "properties": {
    "datetime": {
      "type": "string",
      "format": "date-time",
      "description": "schema-based datetime picker"
    }
  }
}

UI Schema

uischema.json

{
  "type": "Control",
  "scope": "#/properties/datetime"
}

Data

{
  "datetime": "2022-10-04T07:33:12.150Z"
}

UI Schema Based

A string control will also be rendered as a date-time picker by setting the property "format" to "date-time" in the UI Schema options.

Demo

Schema

schema.json

{
  "properties": {
    "datetime": {
      "type": "string",
      "description": "uischema-based datetime picker"
    }
  }
}

UI Schema

uischema.json

{
  "type": "Control",
  "scope": "#/properties/datetime",
  "options": {
    "format": "date-time"
  }
}

Data

{
  "datetime": "2022-10-04T07:33:12.150Z"
}

Options

The React Material renderer set offers additional UI Schema options to customize the appearance of the date-time picker text input as well as the picker itself. Please also refer to the localization section of this page to get information on how to customize the locales.

Date Time Picker Options

Option	Description
dateTimeFormat	The date-time format used for the text input, can be different from the save format
dateTimeSaveFormat	The format in which the time is saved in the data. Note that if you specify a format which is incompatible with JSON Schema's "time" format then you should use the UI Schema based invocation, otherwise the control will be marked with an error.
ampm	If set to true, the time picker modal is presented in 12-hour format, otherwise the 24-hour format is used
clearLabel	Label of the "clear" action in the time picker modal
cancelLabel	Label of the "cancel" action in the time picker modal
okLabel	Label of the "confirm" action in the time picker modal

The following example showcases some of the options. The text input is configured to only show the day, month and year, while hours and minutes are also saved into the data. The time picker presents itself in `am/pm` format.

Demo

Schema

schema.json

{
  "properties": {
    "datetime": {
      "type": "string",
      "description": "uischema-based datetime picker"
    }
  }
}

UI Schema

uischema.json

{
  "type": "Control",
  "scope": "#/properties/datetime",
  "options": {
    "format": "date-time",
    "clearLabel": "Clear it!",
    "cancelLabel": "Abort",
    "okLabel": "Do it",
    "dateTimeFormat": "DD-MM-YY hh:mm:a",
    "dateTimeSaveFormat": "YYYY/MM/DD h:mm a",
    "ampm": true
  }
}

Data

{
  "datetime": "2022-10-04T07:33:12.150Z"
}

Localization

The Material Renderer set let’s you customize the picker´s modal by selecting a locale. For this JSON Forms is using the dayjs library. You need to import dayjs and set the global “locale” variable. In the example below we import dayjs, the locals for English and German and set the global “locale” variable to English. You can do this anywhere in your application.

import dayjs from 'dayjs';

import 'dayjs/locale/de';

import 'dayjs/locale/en';

dayjs.locale("en");

JSON Forms will now use the global variable for the picker´s modal. You can use JSON Forms in your preferred way. For example, like in the code snippet below.

<JsonForms

schema={schema}

uischema={uischema}

data={data}

renderers={materialRenderers}

cells={materialCells}

validationMode={currentValidationMode}

/>

You can see the result in the example below. It is also possible to switch between different locales like we did in our example.

en

​