Date and Time Component

For updated documentation on the Date & Time component, refer to the Form.io User Guide.

JSON Schema

The JSON schema for the Date & Time Component is define as follows:

{
  "label": "Date / Time",
  "customClass": "pl-3 pr-3",
  "tableView": false,
  "datePicker": {
    "disableWeekends": false,
    "disableWeekdays": false
  },
  "enableMinDateInput": false,
  "enableMaxDateInput": false,
  "key": "dateTime",
  "type": "datetime",
  "input": true,
  "widget": {
    "type": "calendar",
    "displayInTimezone": "viewer",
    "locale": "en",
    "useLocaleSettings": false,
    "allowInput": true,
    "mode": "single",
    "enableTime": true,
    "noCalendar": false,
    "format": "yyyy-MM-dd hh:mm a",
    "hourIncrement": 1,
    "minuteIncrement": 1,
    "time_24hr": false,
    "minDate": null,
    "disableWeekends": false,
    "disableWeekdays": false,
    "maxDate": null
  }
}

Timezones

Storage on server

Datetime component value is always saved on server in UTC timezone (for any renderer and any portal (portal.form.io / beta.form.io))

Display

1. On portal.form.io (and on everything else that uses 2.x renderer) date is shown in timezone of viewer
2. On beta.form.io (and on everything else that uses 3.x renderer) there are following 4 options available for display timezone logic:
   • viewer - works same as on 2.x renderer - shows in timezone of viewer
   • submission - shows in timezone of submitter (taken from submission metadata field which has name of timezone and offset https://screencast.com/t/g8P6MF76k9 )
   • location - shows in same timezone for everyone. Timezone is explicitly defined in component settings (in 'Select Timezone' dropdown)
   • utc - shows in UTC timezone for everyone
3. On alpha.form.io (and on anything else that uses 4.x) - it should work same as on 3.x

CSV export

In general, both portal.form.io and beta.form.io have same logic on server: they use 'Display in Timezone' field to define what value of datetime component to put in CSV cell:

• viewer - exports date in viewer's timezone (uses timezone query parameter from portal request)
  • beta.form.io portal does send current viewer's timezone as query parameter: https://screencast.com/t/pxJEz2qQx8
  • portal.form.io doesn't send this query parameter, so on portal.form.io in case of 'viewer' option it will export it as it is saved on server (in UTC)
• submission, location, utc - works same as when just viewing the submission

Core Properties

This component uses the core properties defined within the Common Parameters section.

Specific Properties

Property	Description	Value	Required	Default
format	The date format that is used for the presentation of the date captured.	Any valid DateTime string	true	yyyy-MM-dd HH:mm a
enableDate	If the date picker should be enabled.	Boolean	false	true
enableTime	If the time picker should be enabled.	Boolean	false	true
defaultDate	The default date value	DateTime string, or a Moment declaration.	false
datepickerMode	The initial mode of the date picker when it is opened	One of day, year, week, month	false	day
datePicker	The date picker configurations. See below.	DatePicker Configuration (see below)	true	see below
timePicker	The time picker configurations. See below.	TimePicker Configuration (see below)	true	see below

DatePicker Configuration

Property	Description	Value	Required	Default
showWeeks	If the date picker should show the weeks interface	boolean	false	true
startingDay	The day which is the start of the week, where Sunday is 0.	integer	false	0
minMode	The minimum mode this date picker can be within	One of day, year, week, month	true	day
maxMode	The maximum mode this date picker can be within	One of day, year, week, month	true	year
yearRows	The amount of rows that are shown within the year interface	integer	false	4
yearColumns	The amount of columns that are shown within the year interface	integer	false	5
minDate	The minimum date that can be set within the date picker.	Any DateTime	false	null
maxDate	The maximum date that can be set within the date picker.	Any DateTime	false	null

TimePicker Configuration

Property	Description	Value	Required	Default
hourStep	The amount of hours to step when the up or down button is pressed.	integer	true	1
minuteStep	The amount of minutes to step when the up or down button is pressed.	integer	true	1
showMeridian	To show the am or pm for the time.	boolean	false	true
readonlyInput	If the time input should be readonly	boolean	false	false
mousewheel	To allow the mousewheel when changing the time.	boolean	false	true
arrowkeys	To allow the arrow keys when changing the time.	boolean	false	true