> For the complete documentation index, see [llms.txt](https://docs.bdb.ai/governed-dashboards-1/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.bdb.ai/governed-dashboards-1/charts-gallery/other-charts/date-picker.md).

# Date Picker

The Data Picker component is used to select a date.

## **Default Chart Image**

​![](https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2Frz23INzXNk5D4XqwZo04%2Fimage.png?alt=media\&token=088fda2e-6cb5-46f4-b5c6-bdfde39c21a9)​

## **Default Preview Image**

![](https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FU2tfRerMFlEiGCLsqOfd%2Fimage.png?alt=media\&token=85dff2f3-6101-4166-8acd-17d080760768)

## **Properties of the Date picker component** <a href="#properties-of-the-date-picker-component" id="properties-of-the-date-picker-component"></a>

Background: The user can enable the shadow, change the shadow color, and transparency of that shadow.

### **General**&#x20;

* The user can change values for the height, width, top, and left fields.
* The chart will not be visible at the first preview if the initial visibility option is unchecked.
* The user can use a checkmark to enable year navigation so that we can navigate through different years.
* By enabling date range and providing date values in the *Date From* and *Date Up to fields*, the user can navigate through those months only in the month selection part of the date picker.
* The user can select one date as default and that one will get highlighted in the date picker.
* Different date formats are available inside the *Date Picker* component which the user can select based on the requirement of the data input or output formats.
* The user can connect the output format with some chart components.

&#x20;    ![](/files/qK5JXuYRl2X2a4mx3nE6)**​**

### **Background**

* **Shadow:** Put a checkmark in the given box to enable the Shadow for the component.
* **Shadow Color:** It prompts a color menu to choose color for the shadow.
* **Shadow Transparency:** Set transparency for the component shadow

![](https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FioS21r8SHO1Hpi53LzgE%2Fimage.png?alt=media\&token=1954a559-4b31-4634-8c17-e74ecb0bf1e8)​​

### **Style**

* The user can change the header color of the date picker in the header color section.
* The Section color helps to set the Font color of our default date.
* The Roll Over Color option allows the user to set a change of color while moving from one cell to another.
* The font color helps to set the color of the dates.
* The user can change the font size, font style, and font family.

![](/files/OZFcQwTEZUj5YmmIBSKu)

<figure><img src="/files/dyfUwCwpZETtVUKQrxhW" alt=""><figcaption><p>Style </p></figcaption></figure>

## **Possible Variants of the Date Picker by modifying Properties**

* Date picker component with date only

![](https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FO4o3Uqj5pNgUKw0U3K9x%2Fimage.png?alt=media\&token=e36359b4-57e0-4454-bc27-bbe1f06f4b18)​![](https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2F3z3IFSd8WuDAxFQxO1tU%2Fimage.png?alt=media\&token=d71d8a63-f7df-460f-b7e2-2c48a08a660b)​

* Date picker with Date range Property

![](https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FitwElPRpsiRFNK8nCNjU%2Fimage.png?alt=media\&token=117c2a66-3baf-4d3c-9f0e-0965dfb3724f)​![](https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FL73Uib3C1o2F32VKTw2p%2Fimage.png?alt=media\&token=bd189636-409a-4c94-a5b7-3478f47510c9)​​