# Date Picker

### Overview

Use the **Date Picker** Web Control to collect a specific date from the user.&#x20;

![organizing info](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-3a297887187775699d3e38b054cc1d3da3dc02ee%2Fdate-picker-web-control-v1715-0.png?alt=media)

### Control Properties

#### Minimum Days Out

Determines the minimum number of displayed days from which a user can pick a date taking today's date as the starting point.

#### Maximum Days Out

Determines the maximum number of displayed days from which a user can pick a date taking today's date as the starting point.

#### Date Picker Layout

Determines how many days the Date Picker presents. Options are:

* **1 Week**
* **2 Weeks**
* **1 Month**

#### Date Range

Determines the date range from which the user can pick a date. Options are:

* **all** - allows both dates in the past and the future to be selected
* **past** - allows only dates in the past to be selected
* **future** - allows only dates in the future to be selected

#### Calendar

Presents all [TCPA](../security-and-compliance/tcpa) calendars available per US state.

### Data Binding

By default, this Data Binding property auto-generates a Variable of type [Date](../variable-data-types/the-date-variable-data-type) at the Web Page level to store the data from the input.

### Style

The Date Picker is a compound Web Control. You can style each Control separetely. See [Common Style Properties of Web Controls](web-controls-overview/common-style-properties-of-web-controls).

![](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-db242b177735e66cb2063df43e356174c83e793f%2Fdate-picker-web-control-v1715-1.png?alt=media)

### Actions

#### Value Changed

Triggers the set actions whenever the user selects a date in the picker.

### Examples

#### Example 1: Using the Date Picker to select a date for a future home inspection

![organizing info](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-3a297887187775699d3e38b054cc1d3da3dc02ee%2Fdate-picker-web-control-v1715-0.png?alt=media)

Add the Date Control to a Web Flow. Set the **Date Picker Layout** to two weeks and make sure the **Date Range** is set to **Future.**
