Class: UI::DatePickerInput

Inherits:
Phlex::HTML
  • Object
show all
Includes:
DatePickerInputBehavior
Defined in:
app/components/ui/date_picker_input.rb

Overview

DatePicker Input Phlex component An input field with calendar button for date picker.

Examples:

Basic usage

render UI::Input.new(placeholder: "June 01, 2025")

Instance Method Summary collapse

Methods included from DatePickerInputBehavior

#date_picker_icon_button_classes, #date_picker_icon_button_data_attributes, #date_picker_input_classes, #date_picker_input_data_attributes, #date_picker_input_html_attributes

Constructor Details

#initialize(placeholder: "Select date", value: "", id: nil, classes: "", icon_classes: "", **attributes) ⇒ DatePickerInput

Returns a new instance of DatePickerInput.

Parameters:

  • placeholder (String) (defaults to: "Select date") —

    Placeholder text

  • value (String) (defaults to: "") —

    Initial input value

  • id (String) (defaults to: nil) —

    Input ID for label association

  • classes (String) (defaults to: "") —

    Additional CSS classes for input

  • icon_classes (String) (defaults to: "") —

    Additional CSS classes for icon button

  • attributes (Hash) —

    Additional HTML attributes



18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
# File 'app/components/ui/date_picker_input.rb', line 18

def initialize(
  placeholder: "Select date",
  value: "",
  id: nil,
  classes: "",
  icon_classes: "",
  **attributes
)
  @placeholder = placeholder
  @value = value
  @id = id
  @classes = classes
  @icon_classes = icon_classes
  @attributes = attributes
end

Instance Method Details

#view_template ⇒ Object 



34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
# File 'app/components/ui/date_picker_input.rb', line 34

def view_template
  div(class: "relative flex gap-2") do
    input_attrs = date_picker_input_html_attributes
    input_attrs[:id] = @id if @id
    input(**input_attrs)

    button(
      type: "button",
      class: date_picker_icon_button_classes,
      data: {
        ui__datepicker_target: "trigger",
        ui__popover_target: "trigger"
      }
    ) do
      render_calendar_icon
      span(class: "sr-only") { "Select date" }
    end
  end
end