# Date picker element

Allows users to select a date from a calendar style UI.

| | |
|---|---|
| **Type** | `datepicker` |
| **Available in** | Messages, Modals, Home tab |
| **Works in blocks** | [Section block](https://workstation.repzo.com/docs/developers/block-kit/blocks/section-block), [Actions block](https://workstation.repzo.com/docs/developers/block-kit/blocks/actions-block), [Input block](https://workstation.repzo.com/docs/developers/block-kit/blocks/input-block) |

## Usage

Picking a date sends your app a `block_actions` payload with the date as `selected_date` (`YYYY-MM-DD`):

```json
{
  "type": "datepicker",
  "action_id": "follow_up_date",
  "block_id": "renewal_acme",
  "placeholder": { "type": "plain_text", "text": "Select a date" },
  "selected_date": "2026-11-18",
  "action_ts": "1793786400.000000"
}
```

See the [button element](https://workstation.repzo.com/docs/developers/block-kit/elements/button-element) for the rest of the payload.

The current value is also reported in `state.values[block_id][action_id]` (as `{ "type": …, <value field> }`) of every later interaction with the same message or view.

Inside an [input block](https://workstation.repzo.com/docs/developers/block-kit/blocks/input-block), changing the value sends nothing on its own: your app reads it from `view.state.values` in the `view_submission` payload. Set `dispatch_action: true` on the input block to also receive a `block_actions` payload on every change.

## Fields

| Field | Type | Description | Required? |
|---|---|---|---|
| `type` | String | The type of element. In this case `type` is always `datepicker`. | Required |
| `action_id` | String | An identifier for the action triggered when a date 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_id`s in the containing block. Maximum length is 255 characters. If you leave it out, Repzo generates one. | Optional |
| `initial_date` | String | The initial date that is selected when the element is loaded. This should be in the format `YYYY-MM-DD`. | Optional |
| `confirm` | [Confirmation dialog object](https://workstation.repzo.com/docs/developers/block-kit/objects/confirmation-dialog-object) | A confirm object that defines an optional confirmation dialog that appears after a date is selected. If the reader cancels, nothing is sent to your app. | Optional |
| `focus_on_load` | Boolean | Indicates whether the element will be set to auto focus within the view. Only one element can be set to `true`. Defaults to `false`. | Optional |
| `placeholder` | [Text object](https://workstation.repzo.com/docs/developers/block-kit/objects/text-object) | A `plain_text` only text object that defines the placeholder text shown on the datepicker. Maximum length for the `text` in this field is 150 characters. | Optional |

> **How Repzo Chat differs from Slack**
>
> - `focus_on_load` is accepted but not applied to this element yet.

## Examples

### A section with a date picker

```json
{
  "blocks": [
    {
      "type": "section",
      "block_id": "renewal_acme",
      "text": {
        "type": "mrkdwn",
        "text": "The *Acme Logistics* contract ends on 30 November. When should we follow up about the renewal?"
      },
      "accessory": {
        "type": "datepicker",
        "action_id": "follow_up_date",
        "initial_date": "2026-11-18",
        "placeholder": {
          "type": "plain_text",
          "text": "Select a date"
        }
      }
    }
  ]
}
```

### A date picker in a form

This example belongs in a modal view — the screenshot shows it in a modal.

```json
{
  "blocks": [
    {
      "type": "input",
      "block_id": "contract_start",
      "label": {
        "type": "plain_text",
        "text": "Contract start date"
      },
      "element": {
        "type": "datepicker",
        "action_id": "start_date",
        "placeholder": {
          "type": "plain_text",
          "text": "Select a date"
        }
      },
      "hint": {
        "type": "plain_text",
        "text": "Billing starts on this date."
      }
    }
  ]
}
```

## Related

- [Block elements](https://workstation.repzo.com/docs/developers/block-kit/elements)
- [Block Kit overview](https://workstation.repzo.com/docs/developers/block-kit)