DateTimeSelector
value type: date
The DateTimeSelector
block allows a user to select a date and a time from a calender.
By default, the time selected by the user is converted to GMT time, based on the timezone of the user. The selector will also display the selected time in the correct timezone for that user. If the selectGMT
property is set to true, the value of the selector will be the time selected by the user as GMT time, and not in the timezone of the user.
Other date type blocks are
DateRangeSelector
,DateTimeSelector
,MonthSelector
andWeekSelector
.
Block
State
block_id: null
Block Setup
id: block_id
type: DateTimeSelector
properties:
disabledDates:
dates: []
ranges: []
Settings
DateTimeSelector JSON Schema Definition
type: object
properties:
events:
additionalProperties: false
properties:
onChange:
description: Trigger actions when selection is changed.
type: array
type: object
properties:
additionalProperties: false
properties:
allowClear:
default: true
description: Allow the user to clear their input.
type: boolean
autoFocus:
default: false
description: Autofocus to the block on page load.
type: boolean
disabled:
default: false
description: Disable the block if true.
type: boolean
disabledDates:
description: Disable specific dates so that they can not be chosen.
properties:
dates:
description: >-
Array of specific dates to be disabled. Can be date strings or a
_date objects.
items:
description: Specific dates to be disabled.
type:
- string
- object
type: array
max:
description: >-
Disable all dates greater than the maximum date. Can be a date
string or a _date object.
type:
- string
- object
min:
description: >-
Disable all dates less than the minimum date. Can be a date string
or a _date object.
type:
- string
- object
ranges:
description: >-
Array of array pairs of start and end dates be disabled. Can be date
strings or a _date objects.
items:
description: Specific date ranges to be disabled.
items:
type:
- string
- object
type: array
type: array
type: object
format:
default: YYYY-MM-DD HH:mm
description: >-
Format in which to parse the date value, eg. "DD MMMM YYYY" will parse a
date value of 1999-12-31 as "31 December 1999". The format has to
conform to moment.js formats.
type: string
hourStep:
default: 1
description: Hour intervals to show in the time selector.
minimum: 1
type: integer
inputStyle:
description: Css style to applied to input.
type: object
label:
additionalProperties: false
description: Label properties.
properties:
align:
default: left
description: Align label left or right when inline.
enum:
- left
- right
type: string
colon:
default: true
description: Append label with colon.
type: boolean
disabled:
default: false
description: Hide input label.
type: boolean
extra:
description: Extra text to display beneath the content - supports html.
type: string
extraStyle:
description: Css style to applied to label extra.
type: object
feedbackStyle:
description: Css style to applied to label feedback.
type: object
hasFeedback:
default: true
description: >-
Display feedback extra from validation, this does not disable
validation.
type: boolean
inline:
default: false
description: Render input and label inline.
type: boolean
span:
description: Label inline span.
type: number
title:
description: Label title - supports html.
type: string
type: object
minuteStep:
default: 5
description: Minute intervals to show in the time selector.
minimum: 1
type: integer
placeholder:
default: Select Date & Time
description: Placeholder text inside the block before user types input.
type: string
secondStep:
default: 5
description: Minute intervals to show in the time selector.
minimum: 1
type: integer
selectUTC:
default: false
description: Shows the user's selection as UTC time, not time-zone based.
type: boolean
showNow:
default: true
description: Shows a 'Now' button to set current time.
type: boolean
showToday:
default: true
description: Shows a button to easily select the current date if true.
type: boolean
size:
default: default
description: Size of the block.
enum:
- small
- default
- large
type: string
suffixIcon:
default: CalendarOutlined
description: >-
Name of an Ant Design Icon or properties of an Icon block to customize
icon on right-hand side of the date picker.
type:
- string
- object
timeFormat:
default: HH:mm
description: >-
Time format to show in the time selector. HH:mm:ss will show hours,
minutes and seconds, HH:mm only hours and minutes and HH only hours.
type: string
title:
description: >-
Title to describe the input component, if no title is specified the
block id is displayed - supports html.
type: string
type: object