Datetime picker

A combined date and time control, rendered like Slack's datetimepicker.

datetimepicker opens a calendar plus a time field so a user can pick a date and time together, represented as a single Unix timestamp. Slack allows it in actions blocks, section accessories, and input blocks, but not in App Home.

Fields

Examples

Without an initial value

The date box and time box each show their own placeholder (“Select a date” / “Select a time”) until the user picks a day and clicks Apply.

With an initial value

Inside an input block

With a confirmation dialog

The dialog appears when the user clicks Apply in the popup, before the new value takes effect.

Interactivity

Picking a day and time and clicking Apply fires an action with selected_date_time, a Unix timestamp in seconds:

{
  "type": "datetimepicker",
  "action_id": "starts_at",
  "block_id": "when",
  "selected_date_time": 1718872500
}

The same shape lands in state.values[block_id][action_id]:

{
  "type": "datetimepicker",
  "selected_date_time": 1718872500
}

When initial_date_time is set, that value is reported as state as soon as the element mounts, before any interaction.

Time zone

BlockKitProvider’s timeZone prop (an IANA zone like Europe/Amsterdam) controls how the closed control displays the date and time, and labels the hint text underneath it (e.g. “Time zone: Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna”). It doesn’t change selected_date_time itself, which is always a UTC-based Unix timestamp, exactly as Slack sends it. Without a timeZone prop, the picker displays in UTC.

Related