# Date Picker The Data Picker component is used to select a date. #### Default Chart Image: ![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2F7VGagwUIpVvlwLLMPOqb%2Fimage.png?alt=media\&token=088fda2e-6cb5-46f4-b5c6-bdfde39c21a9) #### Default Preview Image: ![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2F7claaTqIsehcNAtKiA9d%2Fimage.png?alt=media\&token=85dff2f3-6101-4166-8acd-17d080760768) ### **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. #### **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://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FEFD9BCjGEOC8LXb0QLG6%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. ![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FAWoVXxxLwbvtcRCK45Ys%2Fimage.png?alt=media\&token=626078f9-40bf-4f44-a2df-a1d6600df77f) #### The following variants are possible by modifying properties: * Date picker component with date only ![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FwhAhLzlvREKBACy6XJMr%2Fimage.png?alt=media\&token=e36359b4-57e0-4454-bc27-bbe1f06f4b18) ![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FtMAb3aSUSvAEkmcJIppY%2Fimage.png?alt=media\&token=d71d8a63-f7df-460f-b7e2-2c48a08a660b) * Date picker with Date range Property ![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FZDILYpS4X8abbqIrVKG6%2Fimage.png?alt=media\&token=117c2a66-3baf-4d3c-9f0e-0965dfb3724f) ![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FLC24RETzNV5tSQrX4yPw%2Fimage.png?alt=media\&token=bd189636-409a-4c94-a5b7-3478f47510c9)