# Date Picker

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

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FSJqVvG0WDFouqsbciruO%2Fimage.png?alt=media&#x26;token=98637f2f-0255-474b-8829-e37e691a89ae" alt=""><figcaption></figcaption></figure>

## Properties

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FdMMcRzgeTSPWLrV4zOL9%2Fimage.png?alt=media&#x26;token=d44fdba5-3647-46f2-96d0-d75cdab15d3a" 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](https://docs.acho.io/app-builder/app-construction/elements/form-elements/custom-form "mention") 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](https://docs.acho.io/app-builder/app-construction/elements/form-check "mention") for data validation.

See [tooltip](https://docs.acho.io/app-builder/app-construction/elements/tooltip "mention") 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](https://docs.acho.io/app-builder/app-construction/data-store "mention").

**Set Loading:** Set loading animation. See [set-loading-animations](https://docs.acho.io/app-builder/popular-use-cases/set-loading-animations "mention").

{% hint style="info" %}
Visit [interactions](https://docs.acho.io/app-builder/app-construction/interactions "mention") for more on events and actions.
{% endhint %}