Class: EasyAdmin::DatePickerComponent

Inherits:
Phlex::HTML
  • Object
show all
Defined in:
app/components/easy_admin/date_picker_component.rb

Instance Attribute Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize(name:, value: nil, label: nil, **options) ⇒ DatePickerComponent

Returns a new instance of DatePickerComponent.



5
6
7
8
9
10
# File 'app/components/easy_admin/date_picker_component.rb', line 5

def initialize(name:, value: nil, label: nil, **options)
  @name = name
  @value = value
  @label = label
  @options = options
end

Instance Attribute Details

#labelObject (readonly)

Returns the value of attribute label.



3
4
5
# File 'app/components/easy_admin/date_picker_component.rb', line 3

def label
  @label
end

#nameObject (readonly)

Returns the value of attribute name.



3
4
5
# File 'app/components/easy_admin/date_picker_component.rb', line 3

def name
  @name
end

#optionsObject (readonly)

Returns the value of attribute options.



3
4
5
# File 'app/components/easy_admin/date_picker_component.rb', line 3

def options
  @options
end

#valueObject (readonly)

Returns the value of attribute value.



3
4
5
# File 'app/components/easy_admin/date_picker_component.rb', line 3

def value
  @value
end

Instance Method Details

#view_templateObject



12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
# File 'app/components/easy_admin/date_picker_component.rb', line 12

def view_template
  div(
    class: "relative",
    data: { controller: "date-picker" }
  ) do
    if label
      label(for: input_id, class: "block text-sm font-medium text-gray-700 mb-1") { plain label }
    end
    
    div(class: "relative") do
      input(
        type: "text",
        id: input_id,
        name: name,
        value: formatted_value,
        class: input_classes,
        placeholder: options[:placeholder] || "Select date",
        readonly: true,
        data: {
          date_picker_target: "input",
          action: "click->date-picker#toggle focus->date-picker#toggle"
        }
      )
      
      div(class: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-400") do
        calendar_icon
      end
    end
    
    render_date_picker_modal
  end
end