PineUiPhoenix.DatePicker (Pine UI v0.1.3)

View Source

Provides date picker components for selecting dates and date ranges.

The DatePicker module offers components for selecting single dates and date ranges with calendar interfaces.

Summary

Functions

Renders a basic date picker component.

Renders a date range picker component.

Functions

basic(assigns)

Renders a basic date picker component.

This component creates a date picker for selecting a single date.

Examples

<.basic
  id="event-date"
  name="event[date]"
  label="Event Date"
/>

<.basic
  id="appointment-date"
  name="appointment[date]"
  label="Appointment Date"
  min="2023-01-01"
  max="2023-12-31"
  format="MM/DD/YYYY"
  value="2023-06-15"
/>

Options

  • :id - The ID for the input element (required)
  • :name - The name attribute for the input (optional, defaults to ID)
  • :label - Label text for the input (optional)
  • :value - Current date value in ISO format (YYYY-MM-DD) (optional)
  • :min - Minimum selectable date in ISO format (optional)
  • :max - Maximum selectable date in ISO format (optional)
  • :format - Date display format: "YYYY-MM-DD", "MM/DD/YYYY", "DD/MM/YYYY" (optional, defaults to "YYYY-MM-DD")
  • :placeholder - Placeholder text when no date is selected (optional)
  • :hint - Help text displayed below the input (optional)
  • :error - Error message displayed below the input (optional)
  • :disabled - Whether the input is disabled (optional, defaults to false)
  • :required - Whether the input is required (optional, defaults to false)
  • :class - Additional CSS classes for the container (optional)
  • :input_class - CSS classes for the input element (optional)
  • :calendar_class - CSS classes for the calendar dropdown (optional)
  • :phx_change - Phoenix change event name (optional)
  • :phx_blur - Phoenix blur event name (optional)

range(assigns)

Renders a date range picker component.

This component creates a date picker for selecting a start and end date range.

Examples

<.range
  id="date-range"
  name_start="start_date"
  name_end="end_date"
  label="Date Range"
/>

<.range
  id="booking"
  name_start="booking[start_date]"
  name_end="booking[end_date]"
  label="Booking Period"
  value_start="2023-06-15"
  value_end="2023-06-30"
  min="2023-01-01"
  max="2023-12-31"
/>

Options

  • :id - The ID prefix for the input elements (required)
  • :name_start - The name attribute for the start date input (required)
  • :name_end - The name attribute for the end date input (required)
  • :label - Label text for the input (optional)
  • :value_start - Current start date value in ISO format (optional)
  • :value_end - Current end date value in ISO format (optional)
  • :min - Minimum selectable date in ISO format (optional)
  • :max - Maximum selectable date in ISO format (optional)
  • :format - Date display format: "YYYY-MM-DD", "MM/DD/YYYY", "DD/MM/YYYY" (optional, defaults to "YYYY-MM-DD")
  • :placeholder_start - Placeholder text for start date input (optional)
  • :placeholder_end - Placeholder text for end date input (optional)
  • :hint - Help text displayed below the input (optional)
  • :error - Error message displayed below the input (optional)
  • :disabled - Whether the inputs are disabled (optional, defaults to false)
  • :required - Whether the inputs are required (optional, defaults to false)
  • :class - Additional CSS classes for the container (optional)
  • :input_class - CSS classes for the input elements (optional)
  • :calendar_class - CSS classes for the calendar dropdown (optional)
  • :phx_change - Phoenix change event name (optional)
  • :phx_blur - Phoenix blur event name (optional)