Date Picker

The Date Picker component allows users to select specific dates or date ranges, making it an essential input control for filtering, scheduling, or analyzing time-based data. It directly interacts with dashboard datasets and charts, enabling users to dynamically control the data displayed.

The Date Picker supports single date selection, date range selection, and customizable navigation across months and years. Visual properties such as background, font, and colors can also be tailored for dashboard consistency.

Best Situations to Use

Use the Date Picker when you want to:

• Filter Data by Date: Narrow results to a specific time window (e.g., daily sales, login activity, error logs).

• Date Range Analysis: Compare metrics across different periods (e.g., month-over-month, year-over-year).

• Scheduling: Select dates for meetings, reminders, or task deadlines.

• Report Generation: Export reports restricted to a chosen date or range.

• Dynamic Chart Updates: Refresh dashboard charts or KPIs automatically based on user-selected dates.

Not Recommended for:

• Static dashboards where dates are fixed and not meant to be changed by end-users.

Properties

General

• Component Name: Assign a unique identifier to the Date Picker.

• Left / Top: Define component placement on the dashboard.

• Width / Height: Set component size.

• Initial Visibility: Determines if the Date Picker is visible on load.

• Enable Month Navigation: Allows navigation across months.

• Enable Year Navigation: Allows navigation across years.

• Year Range: Define the range of selectable years.

• Associate Date: Link the Date Picker selection to another component.

• Date Type: Specify the display format of the date.

• Enable Date Range: Allow selection between two dates.

• Date From / Date Upto: Define lower and upper limits for date selection.

• Default Date: Predefine a selected date.

• Date Format: Format shown to the user (e.g., DD/MM/YYYY).

• Output Format: Backend date output format for data processing.

• Click Value: Value triggered when a date is selected.

• Start Range Color / End Range Color: Assign colors for date range boundaries.

Background

• Shadow: Enable/disable shadow.

• Shadow Color: Choose shadow color.

• Shadow Transparency: Adjust opacity of shadow effect.

Style

• Background Color: Set background color for the component.

• Font Color: Set text color for readability.

• Font Size: Adjust size of date labels.

• Font Style: Choose normal or italic.

• Font Weight: Set thickness (e.g., normal, bold, 300/600/900).

• Font Family: Select font family.

• Text Decoration: Apply styles like underline.

Usage Scenarios & Examples

Enabling Year & Month Navigation

1. Open Properties of the Date Picker.

2. Enable Month Navigation and Year Navigation checkboxes.

3. Define Year Range to restrict available years.

4. In Preview mode, users can select from month/year drop-down menus.

Setting Colors for Start & End Dates

1. Navigate to General Properties.

2. Select custom colors for Start Range Color and End Range Color.

3. In Preview mode, selected start/end dates appear in chosen colors.

Warning Notifications

• If a Start Date > End Date, a warning message will appear.

• If an End Date < Start Date, a warning message will appear. This ensures valid date ranges are always applied.

Date Range Restrictions

• The component restricts navigation to the defined custom date range.

• Note: Disable Year and Month Navigation to reflect restricted ranges correctly.

Applying Style Properties

• Modify background, font size, color, and decoration to match dashboard design.

• Preview mode immediately reflects applied changes.

Notes

• Use consistent date formats across dashboards to avoid confusion.

• Apply default dates when common ranges (e.g., “Last 30 Days”) are frequently used.

• Pair the Date Picker with dynamic chart updates to improve interactivity.

• Restrict year ranges for performance and clarity (e.g., 2010–2030).