> For the complete documentation index, see [llms.txt](https://learn.squirrel365.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learn.squirrel365.io/components-functions-and-connections/overview/input-controls/date-picker-1.md).

# Date Picker

This component provides a convenient interface for a user to select a date:

<img src="/files/voRffFaghmi616WUlNv3" alt="" width="375">

## Date Picker Properties

The properties are organized into **LAYOUT & POSITIONING, GENERAL,** **DATA INSERTION,** **STYLING**,  and **DYNAMIC VISIBILITY** sections.&#x20;

This guide will describe all sections besides the [**Layout & Positioning**](/components-functions-and-connections/overview/layout-and-positioning.md) and [**Dynamic Visibility**](/getting-started/core-concepts/dynamic-visibility.md) sections, as these are generic to each component. A separate guide and tutorial for each can be found by clicking the links above.

For more information on property panels, see the article on how to [Set Property Values](https://squirrel365.io/knowledgebase/set-property-values/)

***

### GENERAL

<img src="/files/PyJfOAJhAH6z5V7POIVf" alt="" width="375">

* **Default Date Picker** - define the default state of the date picker
  * **Custom** - Display the custom date picker according to the styling properties defined
  * **Native** - uses the OS or browser native date picker styling. If this is selected, you cannot define your own styling.&#x20;
* **Use native on iOS and Android** - When checked, If the published app is viewed on a mobile device, then the Date Picker will use the native Android or iOS styling.

{% hint style="info" %}
The native options are only available when the display type is set to Pop-up.
{% endhint %}

* **Display Type** - Define the Date Picker display type.&#x20;
  * Pop-up - the date picker panel will appear beside the input field when selected
  * Inline - the date picker panel is permanently visible (no input field)
  * Inline + Input - Both the Input field and date picker panel are displayed.
* **Min Date** - define a Minimum date for the Date Picker. This date means that users cannot go further back than this date.
* **Max Date** - define a Maximum date for the Date Picker. This date means that users cannot go beyond this date.
* **Enable date range selection** - check this property to enable range selection. This will change the Date Picker behaviour

<figure><img src="/files/VbYb5VCCJ9ZFcWRppQVE" alt=""><figcaption><p>Single Date Picker - the default state that allows for single date selections.</p></figcaption></figure>

<figure><img src="/files/TxBFlWHrjndO1ZFJjBrp" alt=""><figcaption><p>Range Date Picker - when enabled, 'date range selection' allows for dual-date selection to create a range between two dates.</p></figcaption></figure>

* **Placeholder text for range** - The placeholder text that should be displayed in the input field (only visible when **Display Type** is set to 'Pop-up' or 'Inline + Input').

***

### DATA INSERTION

<figure><img src="/files/oC6k1zIOqJvaxPdVriUf" alt="" width="375"><figcaption></figcaption></figure>

* **Date Value** – This property is the value in the spreadsheet that is linked to the selected date. It must be bound to a cell in the spreadsheet. The value in the bound cell will change when the selection in the date picker is changed and vice versa.
* **Date format** – Set the format that the date picker will use to insert the value into the spreadsheet cell
* **Separator** - Select the separator to use between the date parts

{% hint style="info" %}
If **Enable date range selection** is enabled, the **DATA INSERTION** section will instead display 'Date Value 1' and 'Date Value 2' input fields
{% endhint %}

<figure><img src="/files/PVBlPSIvMOUgKnkNArrA" alt="" width="375"><figcaption></figcaption></figure>

***

### STYLING

The **STYLING** properties are split into 3 sub-sections: **INPUT BOX, DATE PICKER PANEL,** and **SCROLL BUTTONS**

#### INPUT BOX

<img src="/files/T5AkixxX9AvQ370j7OiR" alt="" width="248">

* **Background** - set the background color of the Input Box. This property can be bound to the spreadsheet or selected via the Color Picker.
  * **Opacity** - set the opacity of the Input Box. This property can be bound to the properties panel

* **Border** - set the border color of the Input Box
  * **Opacity** - set the border opacity of the Input Box.

* **Weight** - set the border weight of the Input Box. This can be applied to individual borders via the <img src="/files/ktWopS42mByHiAnKvi5R" alt="" data-size="line"> button

* **Line Style** - select from the dropdown to apply a Line Style to the Input Box border.

* **Corners** - set the corner rounding of the Input Box. This can be applied to individual corners via the <img src="/files/ng9B1copI9yQYFhqQm7o" alt="" data-size="line"> button

* **Padding** - set the padding of the Input Box. This can be applied to individual edges via the <img src="/files/NfsZqt6MD3fvngxio6kN" alt="" data-size="line"> button

* **Font** - select from the dropdown to change the font of the Input Box

* **Size** - change the size of the displayed text in the Input Box

* **B** ***I*****&#x20;U** – Apply Bold, Italic, and Underline text styling to the Input Box. When any of these is toggled on, the button is blue:

<figure><img src="/files/J21b2RL3f3HSKsLMw3fF" alt="" width="143"><figcaption></figcaption></figure>

* **Text Color** - set the text color of the Input Box.
  * **Opacity** - set the text color opacity
* **Placeholder Text Color** - set the text color of the Input Box placeholder text.
  * **Opacity** - set the text color opacity of the placeholder text
* **Show Icon** - check/ uncheck this option to show or hide the Input Box label. This is checked by default.
* **Icon Fill** - set the color of the Icon (if it is set to display)
  * **Opacity** - set the opacity of the icon displayed in the Input Box (if it is set to display)

#### DATE PICKER PANEL

These properties affect the main date selection interface.

<img src="/files/qE0psmdr22GE5gli58EB" alt="" width="250">

* **Background** - set the background color of the Date Picker Panel. This property can be bound to the spreadsheet or selected via the Color Picker.
  * **Opacity** - set the background opacity of the Date Picker Panel. This property can be bound to the properties panel
* **Border** - set the border color of the Date Picker Panel.
  * **Opacity** - set the border opacity of the Date Picker Panel.
* **Weight** - set the border weight of the Date Picker Panel. This can be applied to individual borders via the <img src="/files/ktWopS42mByHiAnKvi5R" alt="" data-size="line"> button
* **Line Style** - select from the dropdown to apply a Line Style to the Date Picker Panel border.
* **Corners** - set the corner rounding of the Date Picker Panel. This can be applied to individual corners via the <img src="/files/ng9B1copI9yQYFhqQm7o" alt="" data-size="line"> button
* **Header Background** - set the header background color of the Date Picker Panel.
  * **Opacity** - set the header background opacity of the Date Picker Panel.
* **Effects** – choose between **None** and **Drop Shadow** from the dropdown box. If **Drop Shadow** is selected, further drop shadow properties are shown.
  * **Color** - This property sets the color of the shadow
    * **Opacity** - This property changes the opacity of the shadow
  * **X Offset** - This property adjusts the X offset of the shadow, moving it left or right depending on a positive or negative value
  * **Y Offset** - This property adjusts the Y offset of the shadow, moving it up or down depending on a positive or negative value
  * **Blur** - This property adjusts the blur percentage of the shadow
* **Header Font** - select from the dropdown to change the font of the header text in the Date Picker Panel
* **Size** - change the size of the header text in the Date Picker Panel
* **B** ***I*****&#x20;U** – Apply Bold, Italic, and Underline text styling to the Input Box. When any of these is toggled on, the button is blue:

<figure><img src="/files/J21b2RL3f3HSKsLMw3fF" alt="" width="143"><figcaption></figcaption></figure>

* **Header Text Color** - set the header text color of the Date Picker Panel.
  * **Opacity** - set the header text opacity of the Date Picker Panel.
* **Calendar Font** - select from the dropdown to change the font of the calendar text in the Date Picker Panel
* **Size -** change the size of the calendar text in the Date Picker Panel
* **B** ***I*****&#x20;U** – Apply Bold, Italic, and Underline text styling to the Input Box. When any of these is toggled on, the button is blue:

<figure><img src="/files/J21b2RL3f3HSKsLMw3fF" alt="" width="143"><figcaption></figcaption></figure>

* **Calendar Text Color** - set the calendar text color of the Date Picker Panel.
  * **Opacity** - set the calendar text opacity of the Date Picker Panel.
* **Selected Highlight** - set the selected highlight color of the Date Picker Panel.
  * **Opacity** - set the selected highlight opacity of the Date Picker Panel.
* **Hover Highlight** - set the hover highlight color of the Date Picker Panel.
  * **Opacity** - set the hover highlight opacity of the Date Picker Panel.
* **Today Highlight** - set the 'today' highlight color of the Date Picker Panel.
  * **Opacity** - set the today highlight opacity of the Date Picker Panel.
* **Error Highlight** - set the colour used for display of error messages within the Date Picker Panel.
  * **Opacity** - set the error highlight opacity of the Date Picker Panel.

#### SCROLL BUTTONS

<figure><img src="/files/zwf7ha278GForOhIUuuF" alt="" width="250"><figcaption></figcaption></figure>

* **Background** - set the background color of the Scroll Buttons.  This property can be bound to the spreadsheet or selected via the Color Picker.
  * **Opacity** - set the background opacity of the Scroll Buttons.
* **Border** - set the border color of the Scroll Buttons.
  * **Opacity** - set the border opacity of the Scroll Buttons.
* **Weight** - set the border weight of the Scroll Buttons. This can be applied to individual borders via the <img src="/files/ktWopS42mByHiAnKvi5R" alt="" data-size="line"> button
* **Corners** - set the corner rounding of the Scroll Buttons. This can be applied to individual corners via the <img src="/files/ng9B1copI9yQYFhqQm7o" alt="" data-size="line"> button
* **Arrow Color** - set the arrow color of the Scroll Buttons.
  * **Opacity** - set the arrow color opacity of the Scroll Buttons.
* **Hover Highlight** - set the hover highlight color of the Scroll Buttons.
  * **Opacity** - set the hover highlight opacity of the Scroll Buttons.