# Date Picker

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

<figure><img src="https://learn.squirrel365.io/~gitbook/image?url=https%3A%2F%2Fsquirrel365.io%2Fwp-content%2Fuploads%2F2021%2F05%2Fdate-picker-example.png&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=2bf30cdd&#x26;sv=2" alt=""><figcaption></figcaption></figure>

### Date Picker Properties <a href="#date-picker-properties" id="date-picker-properties"></a>

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

This guide will describe all sections besides the [**Layout & Positioning**](https://learn.squirrel365.io/components-functions-and-connections/overview/layout-and-positioning) and [**Dynamic Visibility**](https://learn.squirrel365.io/getting-started/core-concepts/dynamic-visibility) 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 <a href="#general" id="general"></a>

<figure><img src="https://learn.squirrel365.io/~gitbook/image?url=https%3A%2F%2Fsquirrel365.io%2Fwp-content%2Fuploads%2F2021%2F05%2Fdate-picker-general.png&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=e1c687ab&#x26;sv=2" alt=""><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** – This gives the format that the date picker will use to insert the value into the spreadsheet cell

{% hint style="info" %}
When live, values inserted in the spreadsheet **will be registered as Text values**. Using the **=DATEVALUE() formula** and referencing the **Date Value** cell will easily convert this to its **Date** format.
{% endhint %}

***

#### STYLING <a href="#styling" id="styling"></a>

The **STYLING** properties are used to control the appearance and behavior:

<figure><img src="https://learn.squirrel365.io/~gitbook/image?url=https%3A%2F%2Fsquirrel365.io%2Fwp-content%2Fuploads%2F2021%2F05%2Fdate-picker-styling.png&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=9501d851&#x26;sv=2" alt=""><figcaption></figcaption></figure>

* **Display type** – this controls how the date picker is displayed in the project:
  * **Popup** – in this mode, only an input box will appear in the project, and clicking on it will display the full date picker
  * **Inline** – in this mode the full date picker will be permanently displayed in the project
* **Font / Size / Text Color / Opacity** – these properties affect the textual display of the data in the input box (similar settings for the selection portion of the date picker are controlled by properties in the “date picker panel” section below)
* **Show icon** – this checkbox controls whether the calendar icon is shown at the right-hand end of the input box.
* **Icon Fill** **/ Opacity** – these control the color and opacity of the calendar icon at the right-hand end of the input box (if shown)

***

#### DATE PICKER PANEL <a href="#date-picker-panel" id="date-picker-panel"></a>

These properties affect the main date selection interface.

<figure><img src="https://learn.squirrel365.io/~gitbook/image?url=https%3A%2F%2Fsquirrel365.io%2Fwp-content%2Fuploads%2F2021%2F05%2Fdate-picker-panel.png&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=fb52f7dd&#x26;sv=2" alt=""><figcaption></figcaption></figure>

* **Background / Opacity** – Control the color and the opacity of the background
* **Border / Opacity** – Control the color and the opacity of the border
  * **Weight** **/ Line style** – Control the width and style of the border
    * **Individual Weight** - selected this property to apply different widths to each of the component's borders. Each of these individual inputs can be manually edited or bound to the spreadsheet.
* **Corners** – This property determines the corner radius of the button border. Use the slider to amend this property, or type a numerical value into the property field.
  * **Individual Corners** - selected this property to apply different radii to each of the component's corners. Each of these individual inputs can be manually edited or bound to the spreadsheet.
* **Font / Size / Text Color / Opacity** – Control the respective aspects of the text
* **Selected Highlight / Opacity** – Control the color and opacity of the selected date
* **Hover Highlight / Opacity** – Control the color and opacity of a date that the cursor hovers over
* **Today Highlight / Opacity** – Control the color and opacity of today’s date
* **Effect** – choose between **None** and **Drop Shadow** from the dropdown box.


---

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