# Date Picker

Date Picker generates a jquery date control with some tweaks. Select a date from the calendar control or enter it using the keyboard.

***

{% embed url="<https://www.youtube.com/embed/pAzJnMxjV-Q?autoplay=1&rel=0&vq=1080>" %}
*Add a Date Picker*
{% endembed %}

***

### Properties

1. **Date**

   This Date will be shown in the date picker when the field loads. Assign a string in the format `yyyy/MM/dd`, a JavaScript date or Day.js date to this property.
2. **Hint**

   Some placeholder text that will show when the date picker is empty.
3. **Read-Only**

   Set to True if you want the control to display as read-only (value can't be changed) on the page.
4. **Show Current Date**

   Display the current date by default
5. **Validations**

   List of validations to apply to the input
6. **Visible**

   Set to False if you don't want this control to render on the page and be visible to the user.

***

### Assigning data to a DatePicker

Example:

To display a DatePicker control containing a specific date value retrieved by a SQL query:

1. Use an appropriate [Event](/features/events.md), e.g. *Load* (page) or *Click* (button) to which a [*SetValue* ](/actions/set-value.md)action can be added.
2. Add a [SetValue](/actions/set-value.md) action to assign the date value from the query to the DatePicker's *Date* property.

***

### Retrieving data from a DatePicker

Use the **Date** property of the DatePicker inside of a script to return the currently selected date as a Day.js object.

***

### Events

1. **Change**

   An event that triggers when another date is selected.

   Event Input Parameters:

   1. PreviousDate\
      The date that was selected before selecting the new date.
   2. SelectedDate\
      The newly selected date.


---

# 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.stadium.software/controls/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.