Date picker
A calendar control for choosing a single date, rendered like Slack's datepicker.
datepicker opens a calendar popup for choosing one date. Use it in an actions block or a
section’s accessory for a quick date pick, or in an input block to collect a date in a modal.
Fields
typestring
Always `datepicker`.
stringaction_id?string
Identifies this element in the `block_actions` payload. Must be unique within a block.
stringinitial_date?string
The date selected when the element loads, as `YYYY-MM-DD`.
stringplaceholder?PlainTextElement
Text shown when no date is selected. Slack limits it to 150 characters.
PlainTextElementconfirm?ConfirmationDialog
A confirmation dialog shown before the pick (or clear) takes effect.
ConfirmationDialogfocus_on_load?boolean
Focuses this element when its modal or Home tab loads. Only one element per view. Slack ignores it in messages.
booleanfalseExamples
Without an initial value
Empty until the user picks a date. The input shows the placeholder text, or “Select a date” if
none is given.
With an initial value
Outside an input block, the closed control shows the date as Slack does on the web:
MM/DD/YYYY.
Inside an input block
An input block spells the date out instead, e.g. “April 28th, 1990”:
With a confirmation dialog
The dialog appears before a pick (or a “Clear selection”) takes effect; declining leaves the element unchanged.
Interactivity
Picking a day (or opening the popup’s “Clear selection” footer, which appears once a date is set)
fires an action with selected_date, and clearing sends null:
{
"type": "datepicker",
"action_id": "select_date",
"block_id": "trip",
"selected_date": "2024-06-20"
}The same shape lands in state.values[block_id][action_id] for reading back later, e.g. from a
view_submission payload:
{
"type": "datepicker",
"selected_date": "2024-06-20"
}When initial_date is set, that value is reported as state as soon as the element mounts. You
don’t need an interaction first to read it back.