docs

⌘K
  2. Home
  4. Docs
  6. docs
  8. Widgets
  10. DateTime

DateTime

  • Name: datetime
  • UI: Datetime picker
  • Data type: date-fns formatted datetime string

The datetime widget translates a datetime picker to a datetime string.

Widget Options

For common options, see Common widget options.

Name

Type

Default

Description

default

string

Current Date and Time

Optional. The default value for the field. Accepts a datetime string, or an empty string to accept blank input.

format

string

yyyy-MM-dd'T'HH:mm:ss.SSSXXX

Optional. Sets storage format. Accepts date-fns tokens

date_format

string
| boolean

true

Optional. Sets date display format in UI.string – Accepts date-fns tokenstrue – Uses default locale formatfalse – If time_format is true or a string, then date picker is hidden

time_format

string
| boolean

true

Optional. Sets time display format in UI.string – Accepts date-fns tokenstrue – Uses default locale formatfalse – Hides the time picker

picker_utc

boolean

false

Optional. true – The datetime picker will display times in UTCfalse – The datetime picker will display times in the user’s local timezone When using date-only formats, it can be helpful to set this to true so users in all timezones will see the same date in the datetime picker

Examples

Date Time Picker

name: 'datetime'
label: 'Datetime'
widget: 'datetime'
date_format: 'dd.MM.yyyy' # e.g. 24.12.2022
time_format: 'HH:mm' # e.g. 21:07
format: 'yyyy-MM-dd HH:mm' # e.g. 2022-12-24 21:07
name: 'datetime',
label: 'Datetime',
widget: 'datetime',
date_format: 'dd.MM.yyyy', // e.g. 24.12.2022
time_format: 'HH:mm', // e.g. 21:07
format: 'yyyy-MM-dd HH:mm', // e.g. 2022-12-24 21:07

Date Picker

name: 'date'
label: 'Date'
widget: 'datetime'
date_format: 'dd.MM.yyyy' # e.g. 24.12.2022
time_format: false
format: 'yyyy-MM-dd' # e.g. 2022-12-24
name: 'date',
label: 'Date',
widget: 'datetime',
date_format: 'dd.MM.yyyy', // e.g. 24.12.2022
time_format: false,
format: 'yyyy-MM-dd', // e.g. 2022-12-24

Time Picker

name: 'date'
label: 'Date'
widget: 'datetime'
date_format: false
time_format: 'HH:mm' # e.g. 21:07
format: 'HH:mm' # e.g. 21:07
name: 'date',
label: 'Date',
widget: 'datetime',
date_format: false,
time_format: 'HH:mm', // e.g. 21:07
format: 'HH:mm', // e.g. 21:07