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

# Date

The Date user block allows you to ask your user for a date. You can ask for a specific date or range
and include time. The block uses native date pickers that adapt to different devices and browsers.

<Tabs>
  <Tab title="Flow">
    <Frame style={{ maxWidth: '400px' }}>
      <img src="https://mintcdn.com/urbiport-eca888d8/-ARXSrILxIB7whJw/images/builder/blocks/user/date.png?fit=max&auto=format&n=-ARXSrILxIB7whJw&q=85&s=b116cd8ec0e092bb29fb7b1349e5545f" alt="Date input in flow builder" className="rounded-lg" width="1332" height="770" data-path="images/builder/blocks/user/date.png" />
    </Frame>
  </Tab>

  <Tab title="Bot">
    <Frame style={{ maxWidth: '400px' }}>
      <img src="https://mintcdn.com/urbiport-eca888d8/-ARXSrILxIB7whJw/images/builder/blocks/user/date-viewer.png?fit=max&auto=format&n=-ARXSrILxIB7whJw&q=85&s=9b3ff71abf6f33063fe10ac64a7a67bc" alt="Date input in bot" className="rounded-lg" width="782" height="962" data-path="images/builder/blocks/user/date-viewer.png" />
    </Frame>
  </Tab>
</Tabs>

## Configuration

* **Button Label**: Customize the text shown on the submit button
* **Save Answer**: Choose a variable to store the collected date/range

### Date Range Toggle

Enable date range selection to allow users to pick both start and end dates:

* **From Label**: Customize the label for the start date field (range mode only)
* **To Label**: Customize the label for the end date field (range mode only)
* Collected as a formatted range string in the saved variable

### Time Integration

Enable time selection alongside date picking:

* Changes input type from `date` to `datetime-local`
* Allows users to specify both date and time
* Affects the format patterns and display options

### Date Constraints

* **Minimum Date**: Set the earliest selectable date (format: YYYY-MM-DD or YYYY-MM-DDTHH:mm)
* **Maximum Date**: Set the latest selectable date (format: YYYY-MM-DD or YYYY-MM-DDTHH:mm)
* Supports variable integration for dynamic date limits

### Format

The `Format` setting lets you customize the picked date format.

<Info>
  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.
</Info>