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
<div class="space-y-8">
  <div>
    <h3 class="text-lg font-semibold mb-4">Date Format</h3>
    <div class="lui-date_picker">
      <div data-controller="date-picker"
         data-date-picker-initial-date-value=""
         data-date-picker-show-today-button-value="true"
         data-date-picker-today-label-value="Today"
         data-date-picker-show-clear-button-value="true"
         data-date-picker-clear-label-value="Clear"
         data-date-picker-locale-value="en"
         data-date-picker-submit-on-select-value="false"
         class="lui-date_picker__field">
        <input name="date" class="air-datepicker-input"            readonly
             data-date-picker-target="input"
             placeholder="Select date...">
        <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>
      </div>
    </div>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4">Month Format</h3>
    <div class="lui-date_picker">
      <div data-controller="date-picker"
         data-date-picker-start-view-value="months"
         data-date-picker-min-view-value="months"
         data-date-picker-date-format-value="MMMM yyyy"
         data-date-picker-show-this-month-button-value="true"
         data-date-picker-this-month-label-value="Este mes"
         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="lui-date_picker__field">
        <input name="month" class="air-datepicker-input"
             readonly
             data-date-picker-target="input"
             placeholder="Seleccionar mes...">
        <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>
      </div>
    </div>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4">Year Format</h3>
    <div class="lui-date_picker">
      <div data-controller="date-picker"
         data-date-picker-start-view-value="years"
         data-date-picker-min-view-value="years"
         data-date-picker-date-format-value="yyyy"
         data-date-picker-show-this-year-button-value="true"
         data-date-picker-this-year-label-value="Este ano"
         data-date-picker-show-clear-button-value="true"
         data-date-picker-clear-label-value="Limpar"
         data-date-picker-locale-value="pt"
         data-date-picker-submit-on-select-value="false"
         class="lui-date_picker__field">
        <input name="year" class="air-datepicker-input"
             readonly
             data-date-picker-target="input"
             placeholder="Selecionar ano...">
        <div class="lui-date_picker__icon">
          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 18 18"><g fill="currentColor"><path d="M5.75,3.5c-.414,0-.75-.336-.75-.75V.75c0-.414,.336-.75,.75-.75s.75,.336,.75,.75V2.75c0,.414-.336,.75-.75,.75Z"></path><path d="M12.25,3.5c-.414,0-.75-.336-.75-.75V.75c0-.414,.336-.75,.75-.75s.75,.336-.75,.75V2.75c0,.414-.336,.75-.75,.75Z"></path><path d="M13.75,2H4.25c-1.517,0-2.75,1.233-2.75,2.75V13.25c0,1.517,1.233,2.75,2.75,2.75H13.75c1.517,0,2.75-1.233,2.75-2.75V4.75c0-1.517-1.233-2.75-2.75-2.75Zm0,12.5H4.25c-.689,0-1.25-.561-1.25-1.25V7H15v6.25c0,.689-.561,1.25-1.25,1.25Z"></path></g></svg>
        </div>
      </div>
    </div>
  </div>
</div>

DatePicker

Description

Used Components Components where is Used
Label

Usage rules

  • ✅ Do
  • ❌ Don't
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="space-y-8">
  <div>
    <h3 class="text-lg font-semibold mb-4">Date Format</h3>
    <%= render LooposUi::DatePicker.new(format: 'date', locale: 'en') %>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4">Month Format</h3>
    <%= render LooposUi::DatePicker.new(format: 'month', locale: 'es') %>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4">Year Format</h3>
    <%= render LooposUi::DatePicker.new(format: 'year', locale: 'pt') %>
  </div>
</div>

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) %>