The DatePicker component provides an intuitive way for users to select dates. It supports customizable formats, default values, validations, and event handling to fit different use cases.
1. Basic Properties
- Name → Unique identifier for the component (e.g.,
DatePicker1). - Label → Text displayed above the field (e.g.,
Date picker). - Default value → Predefined date when the component loads. For example:
{{ new Date() }}→ automatically sets today’s date.
- Placeholder → Displayed when no date is selected.
States
- Read only → Shows the field without allowing editing.
- Disabled → Disables interaction.
- Hidden → Hides the component but keeps it functional.
- Show clear button → Displays a button to clear the selected date.
2. Layout
Controls placement in responsive grid designs.
📘 See Common Properties → Layout.
3. Events
- onChange → Triggered whenever the selected date changes.
4. Validations
Supports validations such as required fields, date range checks, or custom logic.
📘 See Common Properties → Validations.
5. Format (Important)
The Format property defines how the date will be displayed. Users can choose from predefined formats or create a custom one.
Examples of Supported Formats
MM/DD/YYYY→ 04/15/2025YYYY/MM/DD→ 2025/04/15DD.MM.YYYY→ 15.04.2025YYYY-MM-DD→ 2025-04-15 (ISO standard, common for databases)MMM D, YYYY→ Apr 15, 2025MMMM D, YYYY→ April 15, 2025MMMM DD, YYYY→ April 15, 2025yyyy DD, MMMM→ 2025 15, April
Custom Format
Users can define a custom format to match their localization or business requirements.
6. Business Use Cases
The DatePicker is typically used in:
- Selecting a birth date, due date, deadline, or booking date.
- Filtering records by specific time ranges.
- Forms where date input must match system or database standards.
- Multi-language or international apps where regional date formats are important.
7. Style
Custom styles can be applied to adjust visuals such as colors, fonts, and spacing.
📘 See Common Properties → Style.
✅ The DatePicker component is highly flexible and suitable for both simple forms and complex enterprise workflows. Its Format property ensures compatibility with different localization standards and backend systems.