> For the complete documentation index, see [llms.txt](https://docs.bdb.ai/bdb-documentation/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/bdb-documentation/data-visualization/governed-dashboards/charts-gallery/other-charts/date-picker.md).

# Date Picker

The Data Picker component is used to select a date.

#### Default Chart Image:

![](/files/WfAwsr4ApbTNzFN92Seb)

#### Default Preview Image:

![](/files/OVj4GVBbFbMsSqtTLNvM)

### **Properties of the Date picker component**

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

#### **General** 

* The user can change values for the height, width, top, left fields. 
* The chart will not be visible at the first preview if initial visibility is unchecked. 
* The user can use check mark 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 Data 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;       <img src="/files/yVIw9CBSa6P9tqRDFSAI" alt="" data-size="original">

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

&#x20;      ![](/files/OqkGoo9Y4IGkq5wccrdh)

#### **Style**

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

&#x20;      ![](/files/Roph5fWyl3pdqIvL1ylC)

#### The following variants are possible by modifying properties:

* Date picker component with date only

&#x20;     ![](/files/sr9wktwCp23R6eSgEZEM)

&#x20;      ![](/files/Cb6ipV7RVno5rMh49HHI)

* Date picker with Date range Property

&#x20;     ![](/files/uRThTUsSxZa9Xl0B61Fi)

&#x20;      ![](/files/SZ0wXC6fKFWmbneCfnoR)