DatePicker

The DatePicker component provides an intuitive calendar interface for selecting dates or date ranges. It supports multiple formats, locales, and validation.

Overview

DatePicker provides a complete date selection solution with:

• Single date and date range selection
• Multiple date formats
• Locale support
• Min/max date constraints
• Calendar open/close events
• Built-in validation

Basic Usage

{
  uuid: "my-datepicker",
  name: "birth_date",
  component_type: "datepicker",
  input: {
    label: { type: "string", value: "Date of Birth" },
    placeholder: { type: "string", value: "Select date" },
    format: { type: "string", value: "DD/MM/YYYY" }
  },
  event: {
    onDateChange: `
      $selectedDate = EventData.value;
    `
  }
}

Component Inputs

Property	Type	Default	Description
value	string	''	Current date value
label	string	''	Label text
placeholder	string	''	Placeholder text
helper	string	''	Helper text below input
format	string	'DD/MM/YYYY'	Date display format
locale	string	'en'	Locale for date formatting
size	string	'medium'	Size: 'small', 'medium', 'large'
variant	string	'default'	Variant: 'default', 'outlined', 'filled'
state	string	'default'	State: 'default', 'error', 'warning', 'success'
placement	string	'auto'	Calendar placement: 'auto', 'bottom', 'top'
disabled	boolean	false	Disable the datepicker
required	boolean	false	Mark as required
range	boolean	false	Enable date range selection
minDate	string	-	Minimum selectable date
maxDate	string	-	Maximum selectable date

---

Events

onDateChange

Triggered: When a date is selected

EventData:

{
  value: string  // Selected date value
}

Example:

event: {
  onDateChange: `
    $selectedDate = EventData.value;

    // Calculate age if birth date
    const birthDate = new Date(EventData.value);
    const today = new Date();
    const age = today.getFullYear() - birthDate.getFullYear();
    $userAge = age;
  `
}

onRangeChange

Triggered: When a date range is selected (range mode)

EventData:

{
  startDate: string  // Start date
  endDate: string    // End date
  value: string      // Combined value
}

Example:

event: {
  onRangeChange: `
    $startDate = EventData.startDate;
    $endDate = EventData.endDate;

    // Calculate duration
    const start = new Date(EventData.startDate);
    const end = new Date(EventData.endDate);
    const days = Math.ceil((end - start) / (1000 * 60 * 60 * 24));
    $durationDays = days;
  `
}

onCalendarOpen / onCalendarClose

Triggered: When calendar opens/closes

event: {
  onCalendarOpen: `$calendarVisible = true;`,
  onCalendarClose: `$calendarVisible = false;`
}

onValidation

Triggered: When validation occurs

EventData:

{
  isValid: boolean   // Validation result
  message: string    // Validation message
}

---

Common Patterns

Date Range Booking

{
  component_type: "datepicker",
  input: {
    label: { type: "string", value: "Select booking dates" },
    range: { type: "boolean", value: true }
  },
  inputHandlers: {
    minDate: `return new Date().toISOString().split('T')[0];`
  },
  event: {
    onRangeChange: `
      $checkIn = EventData.startDate;
      $checkOut = EventData.endDate;

      const start = new Date(EventData.startDate);
      const end = new Date(EventData.endDate);
      const nights = Math.ceil((end - start) / (1000 * 60 * 60 * 24));
      $totalNights = nights;
      $totalPrice = nights * $pricePerNight;
    `
  }
}

---

See Also

• TextInput Component - Text input
• Form Component - Form container