Skip to main content

Datetime picker element

Example:

An example of a date time picker element

Fields

FieldsTypeDescriptionRequired?
typeStringThe type of element. In this case type is always datetimepicker.Required
action_idStringAn identifier for the input value when the parent modal is submitted. You can use this when you receive a view_submission payload to identify the value of the input element. Should be unique among all other action_ids in the containing block. Maximum length is 255 characters.Optional
initial_date_timeIntegerThe initial date and time that is selected when the element is loaded, represented as a UNIX timestamp in seconds. This should be in the format of 10 digits, for example 1628633820 represents the date and time August 10th, 2021 at 03:17pm PST.Optional
confirmObjectA confirm object that defines an optional confirmation dialog that appears after a time is selected.Optional
focus_on_loadBooleanIndicates whether the element will be set to auto focus within the view object. Only one element can be set to true. Defaults to false.Optional

Usage Info

Interactive component - see our guide to enabling interactivity.

On desktop clients, the time picker will take the form of a dropdown list and the date picker will take the form of a dropdown calendar. Both options will have free-text entry for precise choices. On mobile clients, the time picker and date picker will use native UIs.

Example

An input block containing a datetime picker element:

{
"type": "input",
"element": {
"type": "datetimepicker",
"action_id": "datetimepicker-action"
},
"hint": {
"type": "plain_text",
"text": "This is some hint text",
"emoji": true
},
"label": {
"type": "plain_text",
"text": "Start date",
"emoji": true
}
}