DateTimePicker

The DateTimePicker component allows users to select both date and time. It is commonly used in applications requiring scheduling, deadlines, logging, or event tracking where precise time input is necessary.

1. Basic Properties

• Name → Unique identifier for the component (e.g., DateTimePicker1).
• Label → Text displayed above the field (e.g., Datetime picker).
• Default value → Initial value when the component loads. Example:
  • {{ new Date() }} → automatically sets the current date and time.
• Placeholder → Text shown when no value is selected.

States

• Read only → Displays the field but prevents editing.
• Disabled → Disables user interaction.
• Hidden → Hides the component but keeps it available in logic.
• Show clear button → Allows clearing the selected date and time.

2. Layout

Manages responsiveness and positioning inside the grid system.

📘 See Common Properties → Layout.

3. Events

• onChange → Fires whenever the date or time selection changes.

4. Validations

Enables applying rules such as:

• Required field check.
• Date and time must be greater/less than a specific limit.
• Business logic (e.g., appointment time cannot be in the past).

📘 See Common Properties → Validations.

5. Format (Important)

The Format property defines how both date and time are displayed.

Examples of Supported Formats

• MM/DD/YYYY h:mm → 04/15/2025 14:30
• YYYY/MM/DD h:mm → 2025/04/15 14:30
• DD.MM.YYYY h:mm → 15.04.2025 14:30
• YYYY-MM-DD h:mm → 2025-04-15 14:30 (ISO-like format, often used in APIs).
• MMM D, YYYY h:mm → Apr 15, 2025 14:30
• MMMM D, YYYY h:mm → April 15, 2025 14:30
• MMMM DD, YYYY h:mm → April 15, 2025 14:30
• yyyy DD, MMMM h:mm → 2025 15, April 14:30

Custom Format

Users can define their own custom formats to match regional standards or backend expectations.

6. Business Use Cases

The DateTimePicker is suitable for:

• Booking systems (e.g., hotel check-in/out, flight schedules).
• Task and workflow management with deadlines.
• Logging events with precise timestamps.
• Applications requiring scheduling of meetings or reminders.

7. Style

Customizable for fonts, colors, margins, and spacing.

📘 See Common Properties → Style.

✅ The DateTimePicker component is an essential control for applications where not only the date but also the time must be accurately captured. Its Format property makes it flexible across international date-time standards and system requirements.