<img src="https://a01-support.airkit.com/date-picker-web-control/Airhome-DatePicker-ScheduleInspection.png" alt="organizing info" style={{ maxWidth: "300px", width: "100%" }} />
Use the Date Picker Web Control to collect a specific date from the user.
# Properties
## General
### Date Picker Layout
Determines how many days the Date Picker presents. Options are:
* **1 Week**
* **2 Weeks**
* **1 Month**
### Calendar
Presents all [TCPA](https://support.airkit.com/docs/tcpa) calendars available per US state.
### 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
### Minimum Days Out
Expects type `number`.
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
Expects type `number`.
Determines the maximum number of displayed days from which a user can pick a date taking today's date as the starting point.
### Days Out Mode
Expects type `text`.
Determines the behavior of the minimum/maximum days out.
* **allDays** - all days are counted when setting minimum/maximum days out.
* **calendarDaysOnly** - only available days reflected for the selected [calendar](🔗https://support.airkit.com/reference/date-picker-web-control#calendar) are counted when setting minimum/maximum days out
For example, if a calendar is selected in the control property that does not have any availability slots on Saturdays and Sundays and the current day is Thursday, the following days will be available to select if the **Minimum Days Out** is 3.
* allDays - Monday is the next available day
* calendardaysOnly - Tuesday is the next available day
### Time Zone
Expects type `text`.
Defines the time zone of the dates that can be selected depending on what properties are configured. By default, the control will use the time zone of the user's browser through `session.timeZone`. For a list of supported time zones, see [Supported Time Zones](https://support.airkit.com/docs/supported-time-zones).
## Data Binding
### Value
Expects type `Date`.
By default, this Data Binding property auto-generates a Variable of type [Date](https://support.airkit.com/reference/the-date-variable-data-type) at the Web Page level to store the data from the input.
## Accessibility
### Aria Label
Expects type `text`.
Defines a value to the aria-label of the control for accessibility. For more information see [here](https://www.w3.org/TR/WCAG20-TECHS/ARIA14.html).
## State
### Is Visible
Expects type `boolean`.
If `TRUE` the picker will be visible. If `FALSE` the date picker will not be displayed. If the field is empty, the date picker will be visible.
### Is Disabled
Expects type `boolean`.
If `TRUE` the picker will be disabled and the user will not be able to interact with the control. If `FALSE` the control will be enabled. If the field is empty, the control will be enabled.
# Style
The Date Picker is a compound Web Control. You can style each Control separately. See [Common Style Properties of Web Controls](doc:web-control-styling-properties).
# Actions
### Value Changed
Triggers the set actions whenever the user selects a date in the picker.
Metadata about this event can be accessed through the `event` namespace.
# Example
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.**
<img src="https://a01-support.airkit.com/date-picker-web-control/Airhome-DatePicker-ScheduleInspection.png" alt="organizing info" style={{ maxWidth: "300px", width: "100%" }} />All
Pages