DateCalendar

The DateCalendar component provides a simple calendar-based date picker, allowing users to select a specific date. Unlike DatePicker, which combines input and calendar, DateCalendar focuses more on the direct calendar interface.

1. Basic Properties

• Name → Unique identifier for the component (e.g., DateCalendar1).
• Label → Text label displayed above the component (default: Date picker).
• Default value → Defines the initial date value (e.g., {{ new Date() }}).
• Placeholder → Temporary helper text when no date is selected.
• Read only → Makes the component visible but non-editable.
• Disabled → Prevents user interaction.
• Hidden → Hides the component from the UI while keeping it in the layout.

2. Layout

• Breakpoints → Controls responsive sizing across different devices.
• Spacing → Adjusts the margins and padding relative to other components.
  📘 See Common Properties → Layout.

3. Events

• onChange → Triggered when the user selects a new date.

4. Validations

• Validation rules can be applied to ensure users provide valid date inputs (e.g., required fields, min/max date ranges).
  📘 See Common Properties → Validations.

5. Format

Defines how the selected date is displayed. Supported formats include:

• MM/DD/YYYY → Example: 12/31/2025
• YYYY/DD/MM → Example: 2025/31/12
• YYYY/MM/DD → Example: 2025/12/31
• MM/DD/YY → Example: 12/31/25
• YY/MM/DD → Example: 25/12/31
• YY/DD/MM → Example: 25/31/12
• DD.MM.YYYY → Example: 31.12.2025
• YYYY.DD.MM → Example: 2025.31.12
• YYYY.MM.DD → Example: 2025.12.31
• DD-MM-YYYY → Example: 31-12-2025
• YYYY-DD-MM → Example: 2025-31-12
• YYYY-MM-DD → Example: 2025-12-31
• MMMM D, YYYY → Example: December 31, 2025
• M/D/YYYY → Example: 12/31/2025
• MMMM DD, YYYY → Example: December 31, 2025
• yyyy DD, MMMM → Example: 2025 31, December
• custom → Allows defining a fully custom date format.

6. Style

Custom styles can be applied for colors, typography, borders, and alignment.
📘 See Common Properties → Style.

7. Business Use Cases

• Booking systems → Select check-in/check-out dates.
• Event creation → Choose a meeting or activity date.
• Form inputs → Collect user information such as birth dates or deadlines.
• Dashboards → Filter reports and analytics based on specific dates.

✅ The DateCalendar component offers a clean and direct calendar interface for selecting dates, making it ideal for forms, booking systems, and dashboards where visual date selection is preferred.