LoopOS UI v1.1.32.2-feat.update.logs.component.rc5

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<div class="lui-input lui-date_picker lui-input-select--form !h-[32px]">
  <div class="lui-date_picker__presets"
     data-controller="dropdown-popover date-picker"
     data-dropdown-popover-placement-value="bottom-start"
     data-dropdown-popover-auto-position-value="true"
     data-date-picker-range-value="true"
     data-date-picker-locale-value="es"
     data-date-picker-today-label-value="Today"
     data-date-picker-now-label-value="Now"
     data-date-picker-this-week-label-value="This week"
     data-date-picker-this-month-label-value="This month"
     data-date-picker-this-year-label-value="This year"
     data-date-picker-clear-label-value="Clear"
     data-date-picker-submit-on-select-value="false">
    <input name="date_range" class="air-datepicker-input"
         readonly
         data-date-picker-target="input"
         data-dropdown-popover-target="button"
         data-action="click->dropdown-popover#toggle"
    placeholder="Select date range...">
    <div class="lui-date_picker__icon">
      <div class="lui-icon h-[16px] w-[16px]">
        <i class="fa-regular fa-calendar lui-icon__icon" style="font-size: 16px; color: currentColor;"></i>
      </div>
    </div>
    <dialog data-dropdown-popover-target="menu"
          data-controller="menu"
          data-action="click@document->dropdown-popover#closeOnClickOutside keydown.up->menu#prev keydown.down->menu#next keydown.up->menu#preventScroll keydown.down->menu#preventScroll"
      class="outline-hidden absolute z-50 rounded-lg border border-neutral-200 bg-white text-neutral-800 shadow-md transition-opacity ease-out duration-150 opacity-0 [&[open]]:scale-100 [&[open]]:opacity-100"
      data-menu-index-value="-1">
      <div class="flex flex-col sm:flex-row">
        <!-- Left side: Time range presets -->
        <div class="air-datepicker-presets-left-container">
          <div class="air-datepicker-presets-left-container-buttons">
            <button type="button"
                  class="air-datepicker-presets--button"
                  data-menu-target="item"
                  data-action="click->date-picker#setToday">
              Today
            </button>
            <button type="button"
                  class="air-datepicker-presets--button"
                  data-menu-target="item"
                  data-action="click->date-picker#setYesterday">
              Yesterday
            </button>
            <button type="button"
                  class="air-datepicker-presets--button"
                  data-menu-target="item"
                  data-action="click->date-picker#setLastDays"
              data-days="7">
              Last 7 days
            </button>
            <button type="button"
                  class="air-datepicker-presets--button"
                  data-menu-target="item"
                  data-action="click->date-picker#setLastDays"
              data-days="30">
              Last 30 days
            </button>
            <button type="button"
                  class="air-datepicker-presets--button"
                  data-menu-target="item"
                  data-action="click->date-picker#setLastDays"
              data-days="90">
              Last 90 days
            </button>
            <button type="button"
                  class="air-datepicker-presets--button"
                  data-menu-target="item"
                  data-action="click->date-picker#setLastDays"
              data-days="180">
              Last 180 days
            </button>
            <button type="button"
                  class="air-datepicker-presets--button"
                  data-menu-target="item"
                  data-action="click->date-picker#setLastDays"
              data-days="365">
              Last 365 days
            </button>
          </div>
          <div class="air-datepicker-presets-left-divider-line"></div>
          <div class="air-datepicker-presets-left-container-buttons">
            <button type="button"
                  class="air-datepicker-presets--button"
                  data-menu-target="item"
                  data-action="click->date-picker#setPreset"
              data-preset-type="this-month">
              This month
            </button>
            <button type="button"
                  class="air-datepicker-presets--button"
                  data-menu-target="item"
                  data-action="click->date-picker#setPreset"
              data-preset-type="last-month">
              Last month
            </button>
            <button type="button"
                  class="air-datepicker-presets--button"
                  data-menu-target="item"
                  data-action="click->date-picker#setPreset"
              data-preset-type="this-year">
              This year
            </button>
          </div>
          <div class="air-datepicker-presets-left-divider-line"></div>
          <div class="air-datepicker-presets-left-container-buttons">
            <button type="button"
                  class="air-datepicker-presets--button-close"
                  data-menu-target="item"
                  data-action="click->date-picker#clearSelection">
              Clear & Close
            </button>
          </div>
        </div>
        <!-- Right side: Inline calendar -->
        <div data-controller="date-picker"
             data-date-picker-inline-value="true"
             data-date-picker-range-value="true"
             data-date-picker-show-clear-button-value="true"
             data-date-picker-clear-label-value="Clear"
             data-date-picker-locale-value="es"
             data-date-picker-submit-on-select-value="false"
             class="inline-calendar">
          <input data-date-picker-target="input"
                 class="hidden">
        </div>
      </div>
    </dialog>
  </div>
</div>

DatePicker

Description

Used Components Components where is Used
Label

Usage rules

  • ✅ Do
  • ❌ Don't
1
<%= render LooposUi::DatePicker.new(presets: true, initial_date: Date.current, locale: 'es') %>

No notes provided.

No params configured.

Description

Date Picker component for selecting a single date, a date range, or month/year values. It integrates with a Stimulus controller and Air Datepicker, supports different display formats, an inline mode, and optional presets.

Arguments

Property Default Required Description
inline false Renders an inline calendar (always visible).
name nil Input name attribute. Defaults to date, month, year, or date_range depending on mode.
submit_on_select false When true, submits the surrounding form after selecting.
range false Enables date range selection.
presets false Shows preset quick ranges in a popover with an inline calendar.
format 'date' Controls the picker format: 'date', 'month', or 'year'.
initial_date nil Initial date (Date). For range, treated as min/start.
end_date nil End date (Date) used as max/end for ranges.

Notes:

  • For format: 'month' and format: 'year', the picker starts and is constrained to months or years.
  • When presets: true, range selection is enabled and a left-side presets column is shown.

Slots

None.

JS Events

Emits on the input element:

  • change: Fired whenever the input value changes due to selection or clearing.

Listens to:

  • No custom events. Uses internal Stimulus behaviors.

Accessibility

  • The input is readonly and opens a calendar UI; ensure labels and context are provided by the surrounding form.

Examples

  • Single date:
<%= render LooposUi::DatePicker.new %>
  • Month-only:
<%= render LooposUi::DatePicker.new(format: 'month') %>
  • Year-only:
<%= render LooposUi::DatePicker.new(format: 'year') %>
  • Date range:
<%= render LooposUi::DatePicker.new(range: true) %>
  • With presets and inline calendar:
<%= render LooposUi::DatePicker.new(presets: true, initial_date: Date.current) %>