# 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](https://docs.stadium.software/features/events), e.g. *Load* (page) or *Click* (button) to which a [*SetValue* ](https://docs.stadium.software/actions/set-value)action can be added.
2. Add a [SetValue](https://docs.stadium.software/actions/set-value) 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.