Class: DatePickerComponent

Inherits:
Funicular::Component
  • Object
show all
Defined in:
lib/components/date_picker_component.rb

Constant Summary collapse

WEEKDAYS = 
["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
MONTH_NAMES = 
[
  "January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
]

Instance Method Summary collapse

Instance Method Details

#clear ⇒ Object 



48
49
50
51
 
# File 'lib/components/date_picker_component.rb', line 48

def clear
  emit_change("")
  patch(calendar_open: false)
end

#close_calendar ⇒ Object 



28
29
30
 
# File 'lib/components/date_picker_component.rb', line 28

def close_calendar
  patch(calendar_open: false)
end

#handle_input(event) ⇒ Object 



53
54
55
 
# File 'lib/components/date_picker_component.rb', line 53

def handle_input(event)
  emit_change(event.target[:value].to_s)
end

#initialize_state ⇒ Object 



8
9
10
11
12
13
14
15
16
17
 
# File 'lib/components/date_picker_component.rb', line 8

def initialize_state
  year, month, = parse_date(props[:value])
  today_year, today_month = today_parts

  {
    calendar_open: false,
    view_year: year || today_year,
    view_month: month || today_month
  }
end

#next_month ⇒ Object 



40
41
42
43
44
45
46
 
# File 'lib/components/date_picker_component.rb', line 40

def next_month
  if state.view_month == 12
    patch(view_year: state.view_year + 1, view_month: 1)
  else
    patch(view_month: state.view_month + 1)
  end
end

#open_calendar ⇒ Object 



19
20
21
22
23
24
25
26
 
# File 'lib/components/date_picker_component.rb', line 19

def open_calendar
  year, month, = parse_date(props[:value])
  patch(
    calendar_open: true,
    view_year: year || state.view_year,
    view_month: month || state.view_month
  )
end

#prev_month ⇒ Object 



32
33
34
35
36
37
38
 
# File 'lib/components/date_picker_component.rb', line 32

def prev_month
  if state.view_month == 1
    patch(view_year: state.view_year - 1, view_month: 12)
  else
    patch(view_month: state.view_month - 1)
  end
end

#render ⇒ Object 



63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
 
# File 'lib/components/date_picker_component.rb', line 63

def render
  div(class: "funicular-date-picker") do
    div(class: "funicular-date-picker__input_row") do
      input(
        type: "text",
        value: props[:value].to_s,
        placeholder: props[:placeholder] || "YYYY-MM-DD",
        class: props[:input_class] || "funicular-date-picker__input",
        oninput: :handle_input,
        onfocus: -> { open_calendar }
      )
      button(type: "button", class: button_class, onclick: -> { open_calendar }) { "Calendar" }
    end

    render_calendar if state.calendar_open
  end
end

#select_day(day) ⇒ Object 



57
58
59
60
61
 
# File 'lib/components/date_picker_component.rb', line 57

def select_day(day)
  value = date_string(state.view_year, state.view_month, day)
  emit_change(value)
  patch(calendar_open: false)
end