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
<div class="lui-date_picker">
  <div data-controller="date-picker"
         data-date-picker-range-value="true"
         data-date-picker-show-today-button-value="true"
         data-date-picker-today-label-value="Aujourd'hui"
         data-date-picker-show-clear-button-value="true"
         data-date-picker-clear-label-value="Effacer"
         data-date-picker-locale-value="fr"
         data-date-picker-submit-on-select-value="false"
         class="lui-date_picker__field">
    <input name="date_range" class="air-datepicker-input"
             readonly
             data-date-picker-target="input"
           placeholder="Sélectionner une plage de dates...">
    <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>

DatePicker

Description

Used Components Components where is Used
Label

Usage rules

  • ✅ Do
  • ❌ Don't
1
<%= render LooposUi::DatePicker.new(range: true, format: "date", locale: 'fr') %>

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