# 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**&#x20;

* The user can change values for the height, width, top, left fields.&#x20;
* The chart will not be visible at the first preview if initial visibility is unchecked.&#x20;
* The user can use check mark to enable year navigation so that we can navigate through different years.&#x20;
* 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.&#x20;
* 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.&#x20;
* 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)


---

# 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://docs.bdb.ai/bdb-documentation/data-visualization/governed-dashboards/charts-gallery/other-charts/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.
