# Date Picker

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

![](https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FNDIVJejGBI1cesgn25GB%2FDatepicker_component.png?alt=media\&token=6e72f5f1-92b0-4391-afad-afd7b97650e3)

## Date Picker Properties

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

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

![](https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FsKTuo9gAY0b1KZMQhkHU%2FDatepicker_properties_General.png?alt=media\&token=0b297805-0200-4bf1-ac50-d9c45d69e5cd)

* **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. 
* **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. 
  * 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="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FVqUnCTuBajRablfFxNSc%2FDatePicker_Single.svg?alt=media&#x26;token=afae9764-ba17-4694-bd9d-67536c89d10e" alt=""><figcaption><p>Single Date Picker - the default state that allows for single date selections.</p></figcaption></figure>

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2Fgg8fKg0b5XeKGHg6OYXb%2FDatePicker_Range.svg?alt=media&#x26;token=5b2f5bff-1efb-4665-b682-430a3c382e01" 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="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FRnd7yyHlAeB7IvzrTyRW%2FDatepicker_properties_DATAINSERTION.png?alt=media&#x26;token=2b3f229e-2901-43d2-a0ba-77e706ee5f90" 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="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FGUjOgeXHUhObCy8ZfB9G%2FDatepicker_properties_DATAINSERTION_RANGE.png?alt=media&#x26;token=000602c9-c5ed-4b7c-85f6-f16edf6f0bf2" 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

![](https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FdxCMoTpnz9iQyUdyKU7R%2FDatepicker_properties_STYLING_INPUTBOX.png?alt=media\&token=fc193bd6-8061-496f-89f4-c09ae000350c)

* **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="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FnBA5NiQitVIAh7KOfItN%2FIndividualPadding.png?alt=media&#x26;token=d4a6ccec-9cf6-41bb-bab8-37554bc617ba" 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="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FxnMRmHLU46zhaLcgdkTM%2FIndividualCorners.png?alt=media&#x26;token=424e8f7d-b1cb-4c44-8940-fd3d61d89b91" alt="" data-size="line"> button

* **Padding** - set the padding of the Input Box. This can be applied to individual edges via the <img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FzbBPBx24O6MZxMjxvlfv%2FIndividualPadding.png?alt=media&#x26;token=296b6a96-0a61-4a49-b908-04d2ef9b32fb" 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="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2F8Qas5eAOVmiTyEvOV7d8%2Fbold_italic_underline.png?alt=media&#x26;token=895fd7a3-2efa-4dbd-a746-5843d5b60833" 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.

![](https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FHgpwnrfH3h8q9Z74eQkc%2FDatepicker_properties_STYLING_DATEPICKERPANEL.png?alt=media\&token=abc8ba38-0203-4fa4-8c0e-bd74709b3965)

* **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="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FnBA5NiQitVIAh7KOfItN%2FIndividualPadding.png?alt=media&#x26;token=d4a6ccec-9cf6-41bb-bab8-37554bc617ba" 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="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FxnMRmHLU46zhaLcgdkTM%2FIndividualCorners.png?alt=media&#x26;token=424e8f7d-b1cb-4c44-8940-fd3d61d89b91" 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="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2F8Qas5eAOVmiTyEvOV7d8%2Fbold_italic_underline.png?alt=media&#x26;token=895fd7a3-2efa-4dbd-a746-5843d5b60833" 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="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2F8Qas5eAOVmiTyEvOV7d8%2Fbold_italic_underline.png?alt=media&#x26;token=895fd7a3-2efa-4dbd-a746-5843d5b60833" 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="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FeTN7kLclXaPFUfWZFKFF%2FDatepicker_properties_STYLING_SCROLLBUTTONS.png?alt=media&#x26;token=d1e3329b-af75-456f-93fa-2888d14c8f4a" 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="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FnBA5NiQitVIAh7KOfItN%2FIndividualPadding.png?alt=media&#x26;token=d4a6ccec-9cf6-41bb-bab8-37554bc617ba" 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="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FxnMRmHLU46zhaLcgdkTM%2FIndividualCorners.png?alt=media&#x26;token=424e8f7d-b1cb-4c44-8940-fd3d61d89b91" 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.