# 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.


---

# 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://learn.squirrel365.io/components-functions-and-connections/overview/input-controls/date-picker-1.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.