> ## Documentation Index
> Fetch the complete documentation index at: https://docs.zazubot.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Date

The Date input block allows you to ask your user for a date. You can ask for a specific date or range and include time:

<Tabs>
  <Tab title="Flow">
    <Frame>
      <img src="https://mintcdn.com/zazubot/jkWiMkcCk4qiEvi7/images/blocks/inputs/date-flow.png?fit=max&auto=format&n=jkWiMkcCk4qiEvi7&q=85&s=30b6d8ed727e0284f3b1428ed9a9960e" alt="Date input in flow" className="rounded-lg" width="1256" height="850" data-path="images/blocks/inputs/date-flow.png" />
    </Frame>
  </Tab>

  <Tab title="Bot">
    <Frame>
      <img src="https://mintcdn.com/zazubot/jkWiMkcCk4qiEvi7/images/blocks/inputs/date-bot.png?fit=max&auto=format&n=jkWiMkcCk4qiEvi7&q=85&s=7f301aa5df0632ece7564ac39e0eed7d" alt="Date input in bot" className="rounded-lg" width="852" height="392" data-path="images/blocks/inputs/date-bot.png" />
    </Frame>
  </Tab>
</Tabs>

The input will use the native date picker depending on the device and browser used to answer the bot. For example on Firefox it looks like this:

<Frame style={{ maxWidth: '400px' }}>
  <img src="https://mintcdn.com/zazubot/jkWiMkcCk4qiEvi7/images/blocks/inputs/date-native-picker.png?fit=max&auto=format&n=jkWiMkcCk4qiEvi7&q=85&s=af8418c5075d157db70f76f5cd4d5510" alt="Date native picker" width="1060" height="1236" data-path="images/blocks/inputs/date-native-picker.png" />
</Frame>

## Format

The `Format` setting lets you customize the picked date format. Under the hood, it is done using the [date-fns](https://date-fns.org/) library. You can use any of the [formatting tokens](https://date-fns.org/docs/format) supported by the library.

Here are some examples:

```text theme={null}
yyyy-MM-dd
yyyy-MM-dd HH:mm:ss
dd/MM/yy
dd/MM/yyyy HH:mm:ss
d.MM.yy
```