# Date Picker

A data picker allows users to select a specific date from a dropdown calendar.

<figure><img src="/files/AhSU3W9eQe9irYMsasnV" alt=""><figcaption></figcaption></figure>

## Properties

<figure><img src="/files/JIaKLG1I4jooTHM1REtB" alt=""><figcaption></figcaption></figure>

**Form item name:** This is the name that the encompassing form will use to access the output of the date picker. See [Custom Form](/app-builder/app-construction/elements/form-elements/custom-form.md) for how it's used.

**Type:** Choose the date type the user will be selecting. This includes year, month, date, week, and more.

**Default value:** The default value to output if the user does not select a date.

**Max and Min Date:** Select the date range users will be able to choose within.

**Readonly:** When toggled on, users will not be able to select a date.

**Disabled:** When toggled on, users will not be able to select a date.

**Date Format:** Format of the selected date.

**Value Format:** Format that the date will have in the output.

**Range Separator:** Separator character for date ranges.

**Clearable:** When on, users will be able to clear their selection.

**Placeholder:** Placeholder value to display. The element will not take on this value, as opposed to the default value.

**Size:** Choose the size of this element.

See [Form Check](/app-builder/app-construction/elements/form-check.md) for data validation.

See [Tooltip](/app-builder/app-construction/elements/tooltip.md) for tooltip configurations.

## Output

The output format is set by Value format under Property.&#x20;

## Supported Events

**Change Date:** Triggered when a user selects a value.

**Focus:** Triggered when a user selects the Date Picker.

**Blur:** Triggered when a user deselects the Date Picker.

**Visible Change:** Triggered when the Date Picker's dropdown appears/disappears.

## Supported Actions

**Set Value:** Set the output value.

**Set Validate Result:** Set whether the input is valid.

**Set Data:** Change element data. See [Data Store](/app-builder/app-construction/data-store.md).

**Set Loading:** Set loading animation. See [Set loading animations](/app-builder/popular-use-cases/set-loading-animations.md).

{% hint style="info" %}
Visit [Interactions](/app-builder/app-construction/interactions.md) for more on events and actions.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.acho.io/app-builder/app-construction/elements/form-elements/date-picker.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.