LoopOS UI v1.1.59.0-release.taskforce.dynamic.form.in.UI.rc2

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
<div class="space-y-8">
  <div>
    <h3 class="text-lg font-semibold mb-4">Date</h3>
    <div class="lui-date_picker-wrapper">
      <div class="lui-date_picker h-[32px]!">
        <div class="lui-date_picker__field" data-controller="date-picker" data-date-picker-locale-value="en" data-date-picker-submit-on-select-value="false" 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-granularity-value="date" data-date-picker-range-separator-value="~" data-date-picker-date-format-value="dd/MM/yyyy">
          <input name="date" class="air-datepicker-input" readonly="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>
  <div>
    <h3 class="text-lg font-semibold mb-4">Month / Year</h3>
    <div class="lui-date_picker-wrapper">
      <div class="lui-date_picker h-[32px]!">
        <div class="lui-date_picker__field" data-controller="date-picker" data-date-picker-locale-value="es" data-date-picker-submit-on-select-value="false" data-date-picker-show-today-button-value="false" data-date-picker-today-label-value="Hoy" data-date-picker-show-clear-button-value="true" data-date-picker-clear-label-value="Limpiar" data-date-picker-granularity-value="month_year" data-date-picker-range-separator-value="~" data-date-picker-date-format-value="MM/yyyy" data-date-picker-start-view-value="months" data-date-picker-min-view-value="months" data-date-picker-show-this-month-button-value="true" data-date-picker-this-month-label-value="Este mes">
          <input name="month" class="air-datepicker-input" readonly="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>
  <div>
    <h3 class="text-lg font-semibold mb-4">Year</h3>
    <div class="lui-date_picker-wrapper">
      <div class="lui-date_picker h-[32px]!">
        <div class="lui-date_picker__field" data-controller="date-picker" data-date-picker-locale-value="pt" data-date-picker-submit-on-select-value="false" data-date-picker-show-today-button-value="false" data-date-picker-today-label-value="Hoje" data-date-picker-show-clear-button-value="true" data-date-picker-clear-label-value="Limpar" data-date-picker-granularity-value="year" data-date-picker-range-separator-value="~" data-date-picker-date-format-value="yyyy" data-date-picker-start-view-value="years" data-date-picker-min-view-value="years" data-date-picker-show-this-year-button-value="true" data-date-picker-this-year-label-value="Este ano">
          <input name="year" class="air-datepicker-input" readonly="readonly" data-date-picker-target="input" placeholder="Selecionar ano...">
          <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>
  <div>
    <h3 class="text-lg font-semibold mb-4">Date & Time</h3>
    <div class="lui-date_picker-wrapper">
      <div class="lui-date_picker h-[32px]!">
        <div class="lui-date_picker__field" data-controller="date-picker" data-date-picker-locale-value="pt" data-date-picker-submit-on-select-value="false" data-date-picker-show-today-button-value="true" data-date-picker-today-label-value="Hoje" data-date-picker-show-clear-button-value="true" data-date-picker-clear-label-value="Limpar" data-date-picker-now-label-value="Agora" data-date-picker-granularity-value="date_time" data-date-picker-range-separator-value="~" data-date-picker-date-format-value="dd/MM/yyyy" data-date-picker-time-format-value="HH:mm" data-date-picker-timepicker-value="true">
          <input name="date" class="air-datepicker-input" readonly="readonly" data-date-picker-target="input" placeholder="Select date and time...">
          <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>
  <div>
    <h3 class="text-lg font-semibold mb-4">Time</h3>
    <div class="lui-date_picker-wrapper">
      <div class="lui-date_picker h-[32px]!">
        <div class="lui-date_picker__field" data-controller="date-picker" data-date-picker-locale-value="pt" data-date-picker-submit-on-select-value="false" data-date-picker-show-today-button-value="true" data-date-picker-today-label-value="Hoje" data-date-picker-show-clear-button-value="true" data-date-picker-clear-label-value="Limpar" data-date-picker-now-label-value="Agora" data-date-picker-granularity-value="time" data-date-picker-range-separator-value="~" data-date-picker-time-format-value="HH:mm" data-date-picker-time-only-value="true">
          <input name="time" class="air-datepicker-input" readonly="readonly" data-date-picker-target="input" placeholder="Select time...">
          <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>
</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
15
16
17
18
19
20
21
22
<div class="space-y-8">
  <div>
    <h3 class="text-lg font-semibold mb-4">Date</h3>
    <%= render LooposUi::DatePicker.new(granularity: 'date', locale: 'en') %>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4">Month / Year</h3>
    <%= render LooposUi::DatePicker.new(granularity: 'month_year', locale: 'es') %>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4">Year</h3>
    <%= render LooposUi::DatePicker.new(granularity: 'year', locale: 'pt') %>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4">Date & Time</h3>
    <%= render LooposUi::DatePicker.new(granularity: 'date_time', locale: 'pt') %>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4">Time</h3>
    <%= render LooposUi::DatePicker.new(granularity: 'time', 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 configurable granularity, an inline mode, and optional presets.

Arguments

Property Default Required Description
inline false Renders an inline calendar (always visible).
id nil Optional DOM id seed. When omitted, a random datepicker-* id is generated.
name nil Input name attribute. Defaults to date, month, year, time, or date_range.
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.
granularity 'date' Selection precision: date, month_year, year, date_time, time.
locale I18n.locale.to_s Locale used for Air Datepicker labels and component translations.
initial_date nil Pre-selected date (Date). Does not restrict selectable dates.
min_date nil Minimum selectable date. Dates before this are disabled in all modes.
max_date nil Maximum selectable date. Dates after this are disabled in all modes.
help nil Help text shown below the input. Hidden when error is present.
error nil Error message shown below the input. Adds an error border to the input.

Value formats by granularity

granularity Input value format
date dd/MM/yyyy
month_year MM/yyyy
year yyyy
date_time Display: dd/MM/yyyy HH:mm — submit: dd/MM/yyyy HH:mm:ss (:00)
time Display: HH:mm — submit: HH:mm:ss (:00)
range + any {start}~{end} using the format above

Notes:

  • For month_year and year, the picker opens in months or years view.
  • When presets: true, range selection is enabled and a left-side presets column is shown.
  • Unknown granularity values fall back to date.
  • LoopOS protocol forms use the same granularity values; map min_date, max_date, and range from the surrounding element when integrating.

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/year:
<%= render LooposUi::DatePicker.new(granularity: 'month_year') %>
  • Year-only:
<%= render LooposUi::DatePicker.new(granularity: 'year') %>
  • Date range:
<%= render LooposUi::DatePicker.new(range: true) %>
  • With date constraints:
<%= render LooposUi::DatePicker.new(
  min_date: Date.new(2024, 1, 1),
  max_date: Date.new(2025, 12, 31)
) %>
  • With presets and inline calendar:
<%= render LooposUi::DatePicker.new(presets: true, initial_date: Date.current) %>