Date Picker
A date picker component is valuable to a dashboard when users select dates or date ranges for various purposes, such as filtering data, scheduling events, or analyzing trends.
Best Practices to Use the Date Picker
Filtering Data by Date: To view specific time-bound data, such as sales, user activity, or system logs.
Date Range Analysis: For comparing metrics over different periods (e.g., month-over-month or year-over-year comparisons).
Scheduling: For selecting dates to schedule meetings, tasks, or reminders.
Report Generation: To generate reports for a specific date or range.
Dynamic Chart Updates: To dynamically refresh dashboard charts and graphs based on the selected date range.
Default Chart Image
Default Preview Image
Properties of the Date Picker Component
General
Component Name: Unique identifier for the date picker component.
Left, Top: Specifies the component's position on the interface.
Width, Height: Determines the size dimensions of the date picker.
Initial Visibility: Sets whether the date picker is visible on load.
Enable Month Navigation: Allows users to navigate between months.
Enable Year Navigation: Allows users to navigate between years.
Year Range: Defines the range of years available for selection.
Associate Date: Links date selection to another component.
Date Type: Specifies the format of the date displayed.
Start Range Color: Color for the start of a date range selection.
End Range Color: Color for the end of a date range selection.
Enable Date Range: Allows selection between two dates.
Date From, Date Upto: Specifies the start and end limits for date selection.
Default Date: Sets a predefined date to be selected initially.
Date Format: Format in which the date is displayed to the user.
Output Format: Date output format in which the date is looked for data handling.
Click Value: Action value triggered on date selection.
Date picker with Date range Property
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 a color for the shadow.
Shadow Transparency: Set transparency for the component shadow.
Style
Background Color: Define the background color for the date picker component, enhancing visual appeal or coherence with the overall theme.
Font Color: Set the color of the dates' text to ensure readability and match design specifications.
Font Size: Adjust the text size for better readability or to maintain stylistic consistency.
Font Style: Choose from different styles such as normal or italic to add emphasis or style to the text.
Font Weight: Control the thickness of the font, ranging from normal to bold or 300/600/900, to make text stand out or blend in.
Font Family: Select from various font families to apply a consistent typeface.
Text Decoration: Apply decoration such as underline for additional styling effects.
Applying Various Properties to Date Picker
Enabling Year & Month Context Menus
Users can get a drop-down context menu displaying the Year and Month ranges in the Date Picker Preview mode.
Navigate to the Properties tab of a Date Picker component.
Access the Enable Month Navigation and Enable Year Navigation options from the General Properties. Use the checkboxes to enable these properties.
The user can set the year range to be displayed using the Year Range field to be displayed.
Access the Date Picker component in the preview mode, it will display the drop-down menu for Years and Months.
Check out the illustration to enable Monthly and Yearly navigation in the Date Picker component.
Setting Different Colors for Start & End Dates
Navigate to the General Properties for a Date Picker component.
Select colors using the Start Range Color and End Range Color pallets. The user may choose separate Date Picker components to set the Start Range Color and End Range Color.
Navigate to the Preview mode, the start and end dates will be displayed in the selected colors.
Check out the illustration on how to set colors for start and end Dates.
Warning Notification Messages
The user will be notified for the instances when the selected Start date is greater than the set End Date for a dashboard containing the Date Pickers components.
A warning message will notify the user when the selected End Date is lesser than the set Start Date for a dashboard containing the Date Pickers components.
Check out the illustration with instances when a warning notification appears for the Date Picker component.
Date Ranges
The Date picker helps the users define ranges for the customized display while choosing a preview for a specific period. The component will restrict the scrolling up to the selected customized range.
Check out the illustration to understand the Data Picker preview with range and without a defined range.
Please Note: The user must disable the Year and Month navigation to reflect the customized date range in the preview mode.
Applying Style Properties
Check out the illustration on applying various Style Properties to the Date Picker component.
Last updated