Date and Time Picker - JSON Forms (2024)

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
  • UI Schema
  • Data

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
  • UI Schema
  • Data

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

OptionDescription
timeFormatThe time format used for the text input, can be different from the save format
timeSaveFormatThe 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.
ampmIf set to true, the time picker modal is presented in 12-hour format, otherwise the 24-hour format is used
clearLabelLabel of the "clear" action in the time picker modal
cancelLabelLabel of the "cancel" action in the time picker modal
okLabelLabel 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.

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
  • UI Schema
  • Data

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
  • UI Schema
  • Data

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

OptionDescription
dateFormatThe date format used for the text input, can be different from the save format
dateSaveFormatThe 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.
viewsArray defining which views are displayed. Options: year, month, date
clearLabelLabel of the "clear" action in the time picker modal
cancelLabelLabel of the "cancel" action in the time picker modal
okLabelLabel 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
  • UI Schema
  • Data

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
  • UI Schema
  • Data

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
  • UI Schema
  • Data

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

OptionDescription
dateTimeFormatThe date-time format used for the text input, can be different from the save format
dateTimeSaveFormatThe 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.
ampmIf set to true, the time picker modal is presented in 12-hour format, otherwise the 24-hour format is used
clearLabelLabel of the "clear" action in the time picker modal
cancelLabelLabel of the "cancel" action in the time picker modal
okLabelLabel 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
  • UI Schema
  • Data

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

Date
Date and Time Picker - JSON Forms (2024)
Top Articles
Latest Posts
Article information

Author: Prof. Nancy Dach

Last Updated:

Views: 5710

Rating: 4.7 / 5 (57 voted)

Reviews: 88% of readers found this page helpful

Author information

Name: Prof. Nancy Dach

Birthday: 1993-08-23

Address: 569 Waelchi Ports, South Blainebury, LA 11589

Phone: +9958996486049

Job: Sales Manager

Hobby: Web surfing, Scuba diving, Mountaineering, Writing, Sailing, Dance, Blacksmithing

Introduction: My name is Prof. Nancy Dach, I am a lively, joyous, courageous, lovely, tender, charming, open person who loves writing and wants to share my knowledge and understanding with you.