Time picker element

Usage info

Interactive component - see our guide to enabling interactivity.

On desktop clients, this time picker will take the form of a dropdown list with free-text entry for precise choices. On mobile clients, the time picker will use native time picker UIs.

Fields

Field	Type	Description	Required?
type	String	The type of element. In this case type is always timepicker.	Required
action_id	String	An identifier for the action triggered when a time is selected. You can use this when you receive an interaction payload to identify the source of the action. Should be unique among all other action_ids in the containing block. Maximum length is 255 characters.	Optional
initial_time	String	The initial time that is selected when the element is loaded. This should be in the format HH:mm, where HH is the 24-hour format of an hour (00 to 23) and mm is minutes with leading zeros (00 to 59), for example 22:25 for 10:25pm.	Optional
confirm	Object	A confirm object that defines an optional confirmation dialog that appears after a time is selected.	Optional
focus_on_load	Boolean	Indicates 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
placeholder	Object	A plain_text only text object that defines the placeholder text shown on the time picker. Maximum length for the text in this field is 150 characters.	Optional
timezone	String	A string in the IANA format, e.g. "America/Chicago". The timezone is displayed to end users as hint text underneath the time picker. It is also passed to the app upon certain interactions, such as view_submission.	Optional

Example

A section block containing a time picker element, with the initial time set to 11:40am:

{
  "type": "section",
  "block_id": "section1234",
  "text": {
    "type": "mrkdwn",
    "text": "Pick a date for the deadline."
  },
  "accessory": {
    "type": "timepicker",
    "timezone": "America/Los_Angeles",
    "action_id": "timepicker123",
    "initial_time": "11:40",
    "placeholder": {
      "type": "plain_text",
      "text": "Select a time"
    }
  }
}