LoopOS UI v1.1.29.0-release.2025.q4.uxe.december.rc1

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-date_picker">
  <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="Hoy"
     data-date-picker-now-label-value="Ahora"
     data-date-picker-this-week-label-value="Esta semana"
     data-date-picker-this-month-label-value="Este mes"
     data-date-picker-this-year-label-value="Este año"
     data-date-picker-clear-label-value="Limpiar"
     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="Seleccionar rango de fechas...">
    <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">
              Hoy
            </button>
            <button type="button"
                  class="air-datepicker-presets--button"
                  data-menu-target="item"
                  data-action="click->date-picker#setYesterday">
              Ayer
            </button>
            <button type="button"
                  class="air-datepicker-presets--button"
                  data-menu-target="item"
                  data-action="click->date-picker#setLastDays"
              data-days="7">
              Últimos 7 días
            </button>
            <button type="button"
                  class="air-datepicker-presets--button"
                  data-menu-target="item"
                  data-action="click->date-picker#setLastDays"
              data-days="30">
              Últimos 30 días
            </button>
            <button type="button"
                  class="air-datepicker-presets--button"
                  data-menu-target="item"
                  data-action="click->date-picker#setLastDays"
              data-days="90">
              Últimos 90 días
            </button>
            <button type="button"
                  class="air-datepicker-presets--button"
                  data-menu-target="item"
                  data-action="click->date-picker#setLastDays"
              data-days="180">
              Últimos 180 días
            </button>
            <button type="button"
                  class="air-datepicker-presets--button"
                  data-menu-target="item"
                  data-action="click->date-picker#setLastDays"
              data-days="365">
              Últimos 365 días
            </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">
              Este mes
            </button>
            <button type="button"
                  class="air-datepicker-presets--button"
                  data-menu-target="item"
                  data-action="click->date-picker#setPreset"
              data-preset-type="last-month">
              Mes pasado
            </button>
            <button type="button"
                  class="air-datepicker-presets--button"
                  data-menu-target="item"
                  data-action="click->date-picker#setPreset"
              data-preset-type="this-year">
              Este año
            </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">
              Limpiar y cerrar
            </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="Limpiar"
             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) %>